如何将动态输入字段值作为数组传递给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>
)}
发布于 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);
}
发布于 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} />
发布于 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})
}
}
https://stackoverflow.com/questions/44351985
复制相似问题