Reactjs更改另一个子组件的状态

Question

我的父班有两个孩子

计数器组件具有状态“计数器”，其递增第二个;

class Counter extends Component {

    constructor(props) {
        super(props)
        this.resetCount = this.resetCount.bind(this);
        this.state = {
            count : 0
        }
    }

    resetCount() {
        this.setState({
            count : 0
        });
    }

    componentDidMount() {
        setInterval(() => {
            this.setState({
                count: this.state.count + 1
            });
        }, 1000);
    }

    render() {
        const {count} = this.state;
        const {color,size} = this.props;
        return (
            <Text style={{color, fontSize: size}}>{count}</Text>    

            );
    }
}

在按钮组件中，我有一个onpress的东西

  <Button
      onPress={resetCount}
      title="Reset COunt"
      color="#841584"         
    />

在我的主要父类我渲染

 <Counter color={'green'} size={90} />
    <Button/>

但我在App.js中收到错误'找不到变量resetCount'

Answer 1

在Counter.render（）中使用'Button'时必须使用'this.resetCount'

 <Button
  onPress={this.resetCount}
  title="Reset COunt"
  color="#841584"         
/>

如果Button是你提到的自己的Component，你必须继承onPress函数

组件按钮

<Button onPress={this.props.onResetCount} ... />

组件计数器

render(){
   return (
            <Text style={{color, fontSize: size}}>{count}</Text>    
            <Button onResetCount={this.resetCount} title="Reset Count" color="... />
            );
   )
}

更详细：https://reactjs.org/docs/faq-functions.html

Answer 2

这是因为Button无法访问其兄弟Counter组件中的类方法。如果通过将共享方法移动到父组件来重新组织代码，您可以a）实现您想要的，并且b）使您的代码更简单一些。换句话说，使Counter成为由两个较小的哑组件/纯函数组成的主要组件。

// No need for a component, just a function that returns
// a styled div
function Text({ count }) {
  return <div>{count}</div>;
}

// Another function to return a button
function Button({ resetCount, text }) {
  return <button onClick={resetCount}>{text}</button>;
}

// The main component that keeps the state which it passes
// to the dumb Text component
class Counter extends React.Component {

  constructor() {
    super()
    this.state = { count: 0 };
    this.resetCount = this.resetCount.bind(this);
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({
        count: this.state.count + 1
      });
    }, 1000);
  }

  resetCount() {
    this.setState({ count: 0 });
  }

  render() {
    return (
      <div>
        <Text count={this.state.count} />
        <Button resetCount={this.resetCount} text="Reset count" />
      </div>
    )
  }
}


ReactDOM.render(
  <Counter />,
  document.getElementById('container')
);

DEMO

Answer 3

你得到错误，因为你不能这样做onPress={resetCount}。它正在搜索变量。但是你没有变量，它是一个函数。因此，如果要访问this.resetCount函数，则应使用resetCount()。

以下是如何从子组件中的按钮访问父组件的功能的示例：

// Parent component:
resetCount() {
  // your code
}
render() {
  return(
    <Button resetCount={this.resetCount} /* your other stuff */ />
  );
}

// Button component:
<button onPress={this.props.resetCount}>Click me</button>

注意：您无法以这种方式更新兄弟姐妹。您应该将函数从<Counter/>移动到父组件。