[英]how to get input field values in react?
I am adding dynamically input fields
.I want to get it's value .can you please tell me how I will get it's value我正在添加动态
input fields
。我想获得它的价值。你能告诉我如何获得它的价值吗?
here is my code https://codesandbox.io/s/adoring-meninsky-hu3f8这是我的代码https://codesandbox.io/s/adoring-meninsky-hu3f8
return (
<div className="App">
<Form>
{state.inputs.map(input => (
<KeyValue />
))}
<Button type="button" primary onClick={appendInput}>
Add
</Button>
</Form>
</div>
);
I want to get it's value how ?我想获得它的价值如何?
any update任何更新
I will put a name
for each input and pass it a onChange function.我将为每个输入
name
并传递一个 onChange 函数。 Then in my onChange function i will set my State depend on the name.然后在我的 onChange 函数中,我将根据名称设置我的状态。
Function功能
onChange = e => {
this.setState({[e.target.name] : e.target.value});
}
Render使成为
render(){
return (
<div className="App">
<Form>
{state.inputs.map(input => (
<KeyValue name={input.name} value={this.state[input.name]} onChange={this.onChange } />
))}
<Button type="button" primary onClick={appendInput}>
Add
</Button>
</Form>
</div>
);
}
Here is my solution https://codesandbox.io/s/pensive-lake-erynd这是我的解决方案https://codesandbox.io/s/pensive-lake-erynd
pass function to KeyValue component to get values when input changes将函数传递给 KeyValue 组件以在输入更改时获取值
const handleChangeKeyValues = name => value => {
setState(prevState => {
const newValues = {
...prevState.values,
[name]: value
};
return {
...prevState,
values: newValues
};
});
};
and receives values from props and handle inputs in KeyValue component并从道具接收值并处理 KeyValue 组件中的输入
const KeyValue = ({ onChange, values = { firstName: "", lastName: "" } }) => {
const handleChangeInput = event => {
const { value, name } = event.target;
const newFormValue = { ...values, [name]: value };
onChange(newFormValue);
};
return (
<Form.Group widths="equal">
<Form.Input
value={values.firstName}
fluid
label="Key"
name="firstName"
placeholder="First name"
onChange={handleChangeInput}
/>
<Form.Input
value={values.lastName}
fluid
label="Value"
name="lastName"
placeholder="Last name"
onChange={handleChangeInput}
/>
<Icon style={{ top: 30, position: "relative", left: 10 }} name="delete" />
<Form.Input
style={{ display: "none" }}
fluid
label=""
placeholder="Last name"
/>
</Form.Group>
);
};
Store values in state under unique name for each inputs将值存储在每个输入的唯一名称下的状态中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.