生成文本框中的每個值在數組中使用reactjs

嗨我試着我的手reactjs，我有一個數組和數組我試圖爲每個元素生成文本框。這樣每個元素都被重命名並保存到新的數組中，用於其他目的。我在這裏面臨的問題是我能夠爲每個元素生成文本框，但我不能編輯它。所以我尋求幫助。生成文本框中的每個值在數組中使用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);

來源

2017-07-03 jazzoria

一個我可以看到的問題是，你是直接變異的狀態。狀態應該始終使用this.setState函數進行變異。 –

@TomBerghuis你能幫我怎麼做 – jazzoria

你的onChange函數應該設置這樣的狀態：

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

然後，你必須設置輸入的值：

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

來源

2017-07-03 10:12:58 tomr

生成文本框中的每個值在數組中使用reactjs

回答

相關問題