<input>値の柔軟性

Question

私は2つのReactJSコンポーネントを持っています。最初のコンポーネントはグリッドを表示します。行がクリックされると、2つのコンポーネントに名前が入力されます。

しかし、入力ボックスを編集しようとすると、変更することはできません。これを処理するReactJSの正しい方法は何ですか？

class NameForm extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { formName : ''} 
     this.handleFormName = this.handleFormName.bind(this); 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleFormName(e) { 
     console.log(e.target.value); 
     this.setState({ formName: e.target.value }); 
    } 

    handleSubmit(event) { 
     console.log(this.state.formName); 
     axios.post(this.props.UrlPost, { FirstName: this.state.formName }) 
      .then(function (response) { 
      }); 
     event.preventDefault(); 
    } 

    render() { 
     return (
      <form onSubmit={this.handleSubmit}> 
     <label> 
      Name: 
      <input type="text" value={this.props.Name} onChange={this.handleFormName} /> 
     </label> 
     <input type="submit" value="Submit" /> 
     </form> 
    ); 
     } 
} 

class ComponentWithGriddle extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      selectedRowId: 0, 
     }; 
    } 
    onRowClick(row) { 
     console.log(row.props.data.name); 
     this.setState({ selectedRowId: row.props.data.id }); 
     this.props.handleNameChange(row.props.data.name); 
    } 
    render() { 
     var rowMetadata = {bodyCssClassName: rowData => (rowData.id === this.state.selectedRowId ? "selected" : '')}; 
     //console.log(rowMetadata); 
     return (
     <Griddle results={fakeData} onRowClick={this.onRowClick.bind(this)} columnMetadata={columnMeta} useFixedHeader={true} rowMetadata={rowMetadata} useGriddleStyles={true} /> 
     ); 
    } 
} 

class RootFrame extends React.Component { 
    constructor(props) { 
     super(props); 
     this.handleNameChange = this.handleNameChange.bind(this); 
     this.state = { Name: '' }; 
    } 

    handleNameChange(name) 
    { 
     this.setState({ Name: name }); 
    } 
    render() { 
     return (
     <div> 
      <ComponentWithGriddle Name={this.state.Name} handleNameChange={this.handleNameChange} /> 
      <NameForm UrlPost={this.props.UrlPost} Name={this.state.Name}/> 
     </div> 
     ); 
    }; 
} 


var emptyData = []; 

var columnMeta = [ 
    { 
     "columnName": "id", 
     "order": 1, 
     "locked": false, 
     "visible": true, 
     "displayName": "ID" 
    }, 
    { 
     "columnName": "name", 
     "order": 2, 
     "locked": false, 
     "visible": true, 
     "displayName": "Name" 
    }, 
    { 
     "columnName": "city", 
     "order": 3, 
     "locked": false, 
     "visible": true 
    }, 
    { 
     "columnName": "state", 
     "order": 4, 
     "locked": false, 
     "visible": true 
    }, 
    { 
     "columnName": "country", 
     "order": 5, 
     "locked": false, 
     "visible": true 
    }, 
    { 
     "columnName": "company", 
     "order": 6, 
     "locked": false, 
     "visible": true 
    }, 
    { 
     "columnName": "favoriteNumber", 
     "order": 7, 
     "locked": false, 
     "visible": true, 
     "displayName": "Favorite Number" 
    } 
]; 

var rowMeta = 
{ 
    "key": "id" 
}; 

var propertyGridMeta = [ 
    { 
     "columnName": "property", 
     "order": 1, 
     "locked": false, 
     "visible": true, 
     "cssClassName": "properties-name", 
     "displayName": "Property" 
    }, 
    { 
     "columnName": "description", 
     "order": 2, 
     "locked": false, 
     "visible": true, 
     "cssClassName": "properties-description", 
     "displayName": "Description" 
    }, 
    { 
     "columnName": "type", 
     "order": 3, 
     "locked": false, 
     "visible": true, 
     "cssClassName": "properties-type", 
     "displayName": "Type" 
    }, 
    { 
     "columnName": "default", 
     "order": 4, 
     "locked": false, 
     "visible": true, 
     "cssClassName": "properties-default", 
     "displayName": "Default" 
    } 
] 

var fakeData = [ 
    { 
     "id": 0, 
     "name": "Mayer Leonard", 
     "city": "Kapowsin", 
     "state": "Hawaii", 
     "country": "United Kingdom", 
     "company": "Ovolo", 
     "favoriteNumber": 7 
    }, 
    { 
     "id": 1, 
     "name": "Koch Becker", 
     "city": "Johnsonburg", 
     "state": "New Jersey", 
     "country": "Madagascar", 
     "company": "Eventage", 
     "favoriteNumber": 2 
    }, 
    { 
     "id": 2, 
     "name": "Lowery Hopkins", 
     "city": "Blanco", 
     "state": "Arizona", 
     "country": "Ukraine", 
     "company": "Comtext", 
     "favoriteNumber": 3 
    }, 
]; 



ReactDOM.render(<RootFrame UrlPost={'Home/SaveData'}/>, 
     document.getElementById("demoForm")); 

基本的には、行を選択しようとしていますが、同時に名前を変更して送信をクリックすることができます。 「名前」フィールドからグリッド

から行を選択

、ユーザーが名前を変更することができます。

Answer 1

入力に静的値this.props.Nameを設定しているため、入力が機能しません。あなたの入力を編集して、まだthis.props.Nameで初期値を設定するためには、私は、行を選択し、選択された行からの名前のテキスト入力を移入する場合、どのような状態

class NameForm extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { formName : '', inputName: ''} 
     this.handleFormName = this.handleFormName.bind(this); 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 
    componentDidMount() { 
     this.setState({inputName: this.props.Name}); 
    } 
    handleFormName(e) { 
     console.log(e.target.value); 
     this.setState({ formName: e.target.value }); 
    } 

    handleSubmit(event) { 
     console.log(this.state.formName); 
     this.setState({inputName: event.target.value}); 
     axios.post(this.props.UrlPost, { FirstName: this.state.formName }) 
      .then(function (response) { 
      }); 
     event.preventDefault(); 
    } 

    render() { 
     return (
      <form onSubmit={this.handleSubmit}> 
     <label> 
      Name: 
      <input type="text" value={this.state.inputName} onChange={this.handleFormName.bind(this)} /> 
     </label> 
     <input type="submit" value="Submit" /> 
     </form> 
    ); 
     } 
}