なぜ制御されたテキストコンポーネントに状態を渡すことができませんか？

Question

私は、Reactが自分の制御されたテキスト入力コンポーネントに自分の内部状態を与えると主張するのは混乱しています。私は、制御された入力を作成するための公式の文書に従いました。Reactはコンソールから私を驚かせています。

* warning.js：36警告：ClientInfoTextInputは制御されるタイプのテキストの制御されない入力を変更しています。入力要素は、制御されていない状態から制御された状態に切り替わるべきではありません（またはその逆）。コンポーネントの寿命の間、制御された入力要素または制御されていない入力要素を使用するかどうかを決めます。

render() { 
 
    return (
 
     <input type="text" 
 
     className={styles.ClientInfoTextInput} 
 
     value={this.props.propToPass} 
 
     onChange={this.props.propMethodToPass} 
 
     /> 
 
    )

、なぜ私は動揺なって反応することなく制御入力コンポーネントに小道具を経由して状態を下に渡すことはできませんか？

Answer 1

完全なコードを見ることなく、あなたのコンポーネントをデバッグするのは難しいですが、次のように制御入力コンポーネントに小道具を経由して状態を伝承する一つの方法は次のとおりです。完全ずに伝えるのは難しいですhttp://codepen.io/PiotrBerebecki/pen/bwLjaE

class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     textInParent: '' 
    }; 
    this.handleTextFromChild = this.handleTextFromChild.bind(this); 
    } 

    handleTextFromChild(data) { 
    this.setState({ 
     textInParent: data 
    }); 
    } 

    render() { 
    return (
     <div> 
     <InputForm propMethodToPass={this.handleTextFromChild} 
        propToPass={this.state.textInParent} /> 
     </div> 
    ); 
    } 
} 


class InputForm extends React.Component { 
    render() { 
    return (
     <div> 
     <input type="text" 
       value={this.props.propToPass} 
       onChange={(event) => this.props.propMethodToPass(event.target.value)} /> 
     <p>Text received from Parent via props: {this.props.propToPass}</p> 
     </div> 
    ); 
    } 
} 


ReactDOM.render(
    <App />, 
    document.getElementById('app') 
);