React js动态输入字段值到状态
React js动态输入字段值到状态
提问于 2017-06-04 16:00:55
如何将动态输入字段值作为数组传递给state，并在用户再次更改输入时更新值？
输入字段是由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>
)}回答 3
Stack Overflow用户
发布于 2017-06-04 16:09:29
在每个输入中添加onChange和value，如下所示。
<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);
}Stack Overflow用户
发布于 2018-02-12 09:58:28
具有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} />
Stack Overflow用户
发布于 2021-05-16 02:21:00
//So, here's a simple trick i use to get this done://使用React Hook
const [data, setData] = useState({});
//the create an onInputChange function for the Inputs this way
const onInputChange = async e =>{
const {name, value} = e.target;
//check to validate if entry is not a number
if(isNaN(name)){
data[name] = value;
//somehow update data
setData({...data})
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44351985
复制相关文章
相似问题