react - 將父值傳遞給子輸入值

我是reactjs的新手。什麼是將父值傳遞給子setState的正確方法，我在下面說錯誤，並且我無法更改輸入值，該值看起來正確但無法更改。react - 將父值傳遞給子輸入值

「正在改變待控制類型文本的不受控制的輸入。輸入元件不應該從不受控制的切換控制（或反之亦然）。使用受控的或不受控制的輸入元素的壽命之間決定組件」

export default class parent extends React.Component { 
    constructor (props) { 
     super(props); 
     this.state = { 
      title: '' 
     } 
    } 

    updateFun(){ 
     this.setState({title: 'Parents title'}); 
    } 

    render() { 
     return (
      <div> 
      <button onClick={() => this.updateFun()}> Update </button> 
      <Child title = {this.state.title}/> 
      </div> 
     ) 
    } 
} 


export default class Child extends React.Component { 
    constructor (props) { 
     super(props); 
     this.state = { 
      title: '' 
     } 
    } 

    render() { 
     return (
      <div> 
      <input 
       id="title" 
       type="text" 
       value={this.props.title} 
       /> 
      </div> 
     ) 
    } 
}

來源

2017-08-01 olo

我認爲錯誤是不是在這部分，這個代碼看起來正確，檢查工作[** **菲德爾（https://jsfiddle.net/mayankshukla5031/e1tj6x2b/）有隻有一個問題，父組件的名稱，它應該是父級檢查這個[**答案**]（https://stackoverflow.com/questions/42110144/html-is-not-rendering-in-the-browser -react-js/42110172＃42110172）。 –

我同意@MayankShukla。代碼正常工作，因爲你發佈它。然而，它有點不清楚你想要做什麼。你想讓孩子擁有自己的狀態還是父母應該控制所有狀態？您的孩子中有一個永遠不會使用的標題狀態。目前還不清楚爲什麼你有一個按鈕用靜態文本更新輸入值。 – Chris

您需要使用defaultValue而不是value。您還必須在輸入中添加onChange處理程序。處理輸入更改。

兒童例如

export default class Child extends React.Component { 
constructor (props) { 
    super(props); 
    this.state = { 
     title: props.title 
    } 

    this.handler = this.handler.bind(this); 
} 

handler(event) { 
    console.log(event.target.value); 

    this.setState({title: event.target.value}); 
} 

render() { 
    return (
     <div> 
     <input 
      id="title" 
      type="text" 
      defaultValue={this.state.title} 
      onChange={this.handler} 
      /> 
     </div> 
    ) 
}}

來源

2017-08-01 12:44:55

react - 將父值傳遞給子輸入值

回答

相關問題