使用 setstate 调用父回调时反应子组件无法呈现

Question

我有一个父/子组件：

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: this.props.value};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    // event is persisted, used to update local state
    // and then call parent onChange callback after local state update
    e.persist();
    this.setState(
      {value: e.target.value}, 
      () => this.props.onChange(e)
    );
  }

  render() {
    return (<input ... onChange={this.handleChange} />);
  }
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {modified: false};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const {name, value} = e.target;
    console.log(`${name}: ${value}`);
    // the two line execute fine, and everything works ok
    // but as soon as I add the bottom on, Input no longer updates!
    this.setState({modified: true});
  }

  render() {
    return (
      <Input ... onChange={this.handleChange} 
                 style={{backgroundColor: this.state.modified?"red":"blue"}}
      />
    );
  }
}

---

因此，一旦我对父组件执行 setState，子组件就不再正确呈现。为什么？是否与事件对象或子事件处理程序调用父事件处理程序有关？

Answer 1

使用这个（?前后加空格）：

style={{backgroundColor: this.state.modified ? "red" : "blue"}}

而不是这个：

style={{backgroundColor: this.state.modified?"red":"blue"}}

在此更改后，您的示例可以正常工作：

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: this.props.value};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    // event is persisted, used to update local state
    // and then call parent onChange callback after local state update
    e.persist();
    this.setState(
      {value: e.target.value}, 
      () => this.props.onChange(e)
    );
  }

  render() {
    return (<input style={this.props.style}  onChange={this.handleChange} />);
  }
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {modified: false};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const {name, value} = e.target;
    console.log(`${name}: ${value}`);
    // the two line execute fine, and everything works ok
    // but as soon as I add the bottom on, Input no longer updates!
    this.setState({modified: true});
  }

  render() {
    return (
      <Input onChange={this.handleChange} 
                 style={{backgroundColor: this.state.modified ? "red":"blue"}}
      />
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>