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 Thing

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

在我的主要父级中，我渲染

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

但是我遇到了一个错误app.js

Answer 1

在使用'button'incount.render（）

时，您必须使用'this.ResetCount'

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

如果按钮是其自己的组件，如所述，您必须继承函数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

这是由于按钮无法访问其同胞计数器组件中的类方法。如果您通过将共享方法移动到父组件来稍微重组代码，则可以a）实现所需的目标，b）使您的代码更简单。换句话说，将反面组成由两个较小的愚蠢组件/纯函数组成。

// 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}。它正在搜索变量。但是您没有变量，这是一个函数。因此，如果要访问函数resetCount()。

，则应使用this.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/>移至父部件。