Почему я не могу передать состояние через реквизиты в контролируемый текстовый компонент?

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') 
);