如何將動態輸入字段值傳遞爲狀態爲數組並在用戶再次更改輸入時更新該值？將js動態輸入字段值反應到狀態

輸入字段是由JSON數據生成的，在該狀態下，我們無法定義所有的初始值。任何人都可以爲這類問題提供一些建議嗎？

this.state = { 
file:[{value1,value2}] 
};

和輸入字段生成像

{this.state.language.map((item,index) => 
<div className="be-checkbox inline" key={index} > 
<input type="text" onChange={this.handleChange.bind(this, index)} value={this.state.index} /> 
</div> 
)}

來源

2017-06-04 Dinesh Ghimire

你可以更新您正在使用的相關代碼的問題，所以它很容易幫助 –

要更新狀態或完整狀態裏面的陣列？ –

你好，我需要在數組內的值，如 this.state = {file：[{value1，value2}]}; 和輸入字段等 {this.state.language.map（（項目，指數）=>

）}產生由於在[預先 –

在每一個輸入的onChange添加和值等的下方。

<input type="text" onChange={this.handleChange.bind(this, index)} value={this.state.index}/>

添加函數的調用

handleChange(name, e){ 
    var change = {}; 
    change[name] = e.target.value; 
    this.setState(change); 
    }

來源

2017-06-04 08:09:29

變量輸入與JSON值

您可以構建一個模型來存儲在新的價值觀和兩種方法，一種處理新的價值觀和另一個用於更新狀態。然後，您可以使用數組中的JSON數據對鍵進行調用map()，併爲每個條目生成一個輸入。

class MyFormComponent extends React.Component { 
    inputValues = new Map(); 

    onInputChange(evt, key){ 
     inputValues.set(key, evt.target.value); 
    } 

    updateState() { 
     const update = inputValues.reduce((updater, value) => { 
      return {...updater, value} // assuming value === {key: value} from your example, because {value, value} is not valid JSON 
     }, {}); 

     this.setState({ 
      file: [JSON.stringify(update)] 
     }); 
    } 

    render(
     const keys = Object.keys(JSON.parse(this.state.file[0])) 

     return keys.map(key => { 
      // onChange will give you new values to your map model. 
      <input 
       type="text" 
       key={key} 
       onChange={eve => this.onInputChange(evt, key)} 
      /> 
     }); 
    } 
}

現在叫this.updateState()，只要你想使用當前的輸入值更新狀態。

如<input ... onBlur={this.updateState} />

來源

2018-02-12 01:58:27 Rex

將js動態輸入字段值反應到狀態

回答

變量輸入與JSON值

相關問題