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道具已更新，但字段未重新渲染

回答

相关问题