ReactJS道具已更新，但字段未重新渲染

我一直在玩React中的字段，但遇到了文本輸入未更新（而屬性爲）的問題。我試圖通過類/狀態組件來做到這一點，但無濟於事。我很善良 - 希望能夠製作完全與商店分離的特定形式的組件。任何人都可以將我指向正確的方向嗎？ReactJS道具已更新，但字段未重新渲染

import React from 'react'; 

export default (props) => { 

    function editProjectNameChanged(event, syntheticEvent) { 
     debugger; 
     props.editProject.name = syntheticEvent.target.value; 
    } 

    return (
     <div className="col-xs-5 col-md-5"> 
      <form> 
       <div className="form-group"> 
        <label htmlFor="management-projects-name">Project name</label> 
        <input type="text" className="form-control" id="management-projects-name" 
          value={props.editProject.name} 
          onUserInput={editProjectNameChanged.bind(null, event)} 
          placeholder="Project name" /> 
       </div> 
      </form> 
     </div> 
    ); 
}

在此先感謝..這整個形式的東西比我想象的要難！

來源

2016-04-12 Nickvda

你不應該改變孩子的道具。這對國家來說是一件好事。更新道具並不是一個好主意，因爲父組件未被通知更改，並且狀態更有用，因爲當您調用setState（）時，組件將被重繪。類似的東西（我還沒有測試過）

import React from 'react'; 

export class YourComponent extends React.Component{ 

    constructor(){ 
     this.state = { 
      name: this.props.editProject.name 
     }; 
    } 


    editProjectNameChanged(event, syntheticEvent) { 
     this.setState({ 
      name: syntheticEvent.target.value 
     }); 
    } 

    render(){ 
     return <div className="col-xs-5 col-md-5"> 
      <form> 
       <div className="form-group"> 
        <label htmlFor="management-projects-name">Project name</label> 
        <input type="text" className="form-control" id="management-projects-name" 
          value={props.editProject.name} 
          onUserInput={editProjectNameChanged.bind(this, event)} 
          placeholder="Project name" /> 
       </div> 
      </form> 
     </div>; 
    } 

}

來源

2016-04-12 14:14:11 wezzy

您不應該在組件內改變props的方式。如果你不想讓你的組件管理狀態，它應該接受一個回調作爲prop，它會調用用戶輸入。然後，父組件會決定是否以及如何更新值，並將其作爲道具傳遞迴組件。

<input value={ props.value } onChange={ e => props.onChange(e.target.value) } />

直接突變所述props對象具有自0.13版本沒有影響。你可以在這裏找到blog post explaining why this behaviour was introduced

來源

2016-04-12 14:11:37 VonD

ReactJS道具已更新，但字段未重新渲染

回答

相關問題