reactjsを使用して配列の各値のテキストボックスを生成

Question

こんにちは、私はreactjsで私の手を試して、私は配列を持って、配列の各要素のテキストボックスを生成しようとしています。そのため、各要素の名前が変更され、新しい配列に保存されます。これは他の目的に使用されます。私がここで直面している問題は、各要素のテキストボックスを生成することができますが、編集できません。だから私は助けを探しています。

class setNewname extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      oldArr: [apple,orange,grape], 
      tabName: [], 
     }; 
     this.onNameEdited = this.onNameEdited.bind(this); 
    } 

    onNameEdited(event) { 
     this.state.tabVal = event.target.value; 
     var tabName= this.state.tabName.concat(this.state.tabVal); 
     debugger; 
    }; 

    render() { 
     return (
      <div> 
       {this.state.tName.map(x => 
        {x} 

        <input type="text" label={x} key={x.toString()} 
         onChange={this.onNameEdited} />)} 
      </div> 

     ); 
    } 
} 

function bindAppStateToProps(applicationState) { 
    debugger; 
    return { 
     tableName: applicationState.TableName.saveTable, 
    }; 
} 


export default connect(bindAppStateToProps)(setNewname); 

Answer 1

あなたのonChange機能は、このような状態を設定する必要があります。

this.setState({tabVal: event.target.value}) 

次にあなたが入力の値を設定する必要があります。

<input type="text" label={x} key={x.toString()} value={this.state.tabVal} onChange={this.onNameEdited} />)}