我正在使用 React 中的表单。
我面临的挑战是每当我为输入字段设置 onchange 处理程序时,它都会更改我拥有的所有输入字段的值。
表单输入字段已映射并且来自 api。我想要的是一个通用的更改处理程序来管理所有输入字段。
import React, { Component } from "react";
import {
TextInputComponent,
RadioInputComponent,
SelectComponent,
} from "../../components/index";
import IntlMessages from "../../common/constants/IntlMessages";
class DummyForm extends Component {
constructor(props) {
super(props);
this.state = {
field: "",
checkBox: "",
options: "",
radioField: "",
error: "",
};
}
componentDidMount() {
const code = window.location.pathname.split("/")[2];
this.props.getEmsForms(code);
}
//this my on change handler and it would be great help if someone can tell where iam wrong.
handleChange(e) {
this.setState({
[e.target.name]: e.target.value,
})
}
submit = () => {
const { field, checkBox, options, radioField } = this.state;
const auth = this.props.user.data.user.access_token;
this.props.updateEmailPhone({
email,
address,
auth,
});
};
render() {
return (
<React.Fragment>
<div className="row justify-content-center py-2 my-2">
<div className="col-sm-12 col-lg-5 col-md- border border-info bg-light">
<div className="row p-3">
{this.props.getForms.data
? this.props.getForms.data.map((item) => {
return (
<div className="col-12 p-2">
{item.inputType == "textbox" ? (
<TextInputComponent
key={item.fieldName}
label={item.fieldLabelText}
type="text"
placeholder={item.fieldName}
value={this.state.field}
onChange={(e) =>
this.handleChange(e, "field")
}
/>
) : item.inputType == "dropdown" ? (
<>
<label>{item.fieldLabelText}</label>
<select
className="custom-select "
id="inputGroupSelect01"
onChange={(e) =>
this.handleChange({ options: e.target.value })
}
>
{item.inputOptions.map((key) => (
<option>{key.value}</option>
))}
</select>
</>
) : item.inputType == "checkbox" ? (
<SelectComponent
name={"select2"}
value={this.state.checkBox}
label={item.fieldLabelText}
onChange={(e) =>
this.setState({ checkBox: e.target.value })
}
/>
) : item.inputType == "radio" ? (
<RadioInputComponent
title="gender"
value={this.state.gender}
name={item.fieldLabelText}
onChange={(e) => {
this.setState({ radioField: e.target.value });
}}
/>
) : null}
</div>
);
})
: this.props.getForms.messages}
<div className="row" style={{ marginTop: "50px" }}>
{/* <div className="col d-flex justify-content-start">
<button className="btn-danger" onClick={this.toggleModal}>
Ja
</button>
</div> */}
{this.props.getForms.data && (
<div className="col d-flex justify-content-end">
<button className="btn btn-success button-margin">
<IntlMessages id="blank.button" />
</button>
</div>
)}
</div>
</div>
</div>
</div>
</React.Fragment>
);
}
}
export default DummyForm;
您可以获得name
, value
, type
and checked
来自事件目标的属性并设置状态,其形状如下
{
"input": "a",
"select": "2",
"radio": "3",
"checkbox1": true,
"checkbox3": true,
"checkbox2": true
}
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [state, setState] = useState({});
const onChange = (e) => {
const { name, value, checked, type } = e.target;
const newVal = type === "checkbox" ? checked : value;
setState({
...state,
[name]: newVal
});
};
return (
<>
<div className="section">
<label>
Input
<input name="input" onChange={onChange} />
</label>
</div>
<div className="section">
<label>
select
<select name="select" onChange={onChange}>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</label>
</div>
<div className="section">
<fieldset>
<legend>Radio</legend>
<label>
<input type="radio" name="radio" value="1" onChange={onChange} />1
</label>
<label>
<input type="radio" name="radio" value="2" onChange={onChange} />2
</label>
<label>
<input type="radio" name="radio" value="3" onChange={onChange} />3
</label>
</fieldset>
<fieldset>
<legend>Checkbox</legend>
<label>
<input type="checkbox" name="checkbox1" onChange={onChange} />1
</label>
<label>
<input type="checkbox" name="checkbox2" onChange={onChange} />2
</label>
<label>
<input type="checkbox" name="checkbox3" onChange={onChange} />3
</label>
</fieldset>
<pre>{JSON.stringify(state, null, 2)}</pre>
</div>
</>
);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)