は、子コンポーネントは、私が親/子コンポーネントを持ってSETSTATE

Question

を持つ親のコールバックを呼び出すときにレンダリングするために失敗した反応します正しく表示されます。どうして？それは、イベントオブジェクトまたは親イベントハンドラが子イベントハンドラから呼び出されたという事実と関係がありますか？

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>