ReactJSの小道具は更新されましたが、フィールドは再レンダリングされません

Question

私はReactのフィールドで遊んでいましたが、テキスト入力が更新されていない（プロパティの間は）問題を実行しています。私はクラス/状態のコンポーネントを介してそれをやろうとしましたが、役に立たないのです。私は、店舗から完全に切り離された特定のフォームのみのコンポーネントを作ることができることを望んでいました。誰かが私を正しい方向に向けることができますか？

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

このフォーム全体のことは、私が思ったよりも難しいです！

Answer 1

子供の小道具を変更しないでください。それは州のための良い仕事です。親コンポーネントには変更が通知されず、状態をより便利にするため、親コンポーネントを更新することはお勧めできません。これは、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>; 
    } 

} 

Answer 2

propsをコンポーネント内から変更することはできません。コンポーネントが状態を管理しないようにするには、代わりにpropというコールバックを受け入れる必要があります。 親コンポーネントは、値を更新するかどうか、および方法を決定し、それを小道具としてコンポーネントに戻します。直接propsオブジェクトを変異さ

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

は、バージョン0.13以降は効果がありません。ここに見つけることができますblog post explaining why this behaviour was introduced