如何解决将表单选择中的多个属性设置为state
?代码复制?
因此,我尝试使用一个像{prop1: val1,prop2: val2}
这样的初始状态对象,并从两个<selection>
字段中获取单独的值。
我在让每个event.target.value
提交时遇到问题。
我想到的唯一解决方案是将原始状态拆分为不同的对象,复制处理程序函数,然后在提交时合并它们。但是,正如您所看到的那样,这很快变得很难看,我确定可以对其进行优化,但是使用唯一的事件处理程序却无济于事。
const [firstSelection,setFirstSelection] = useState({color: 'green'})
const [secondSelection,setSecondSelection] = useState({time: 'evening'})
const handleFirstChange = e => setFirstSelection({ color: e.target.value })
const handleSecondChange = e => setSecondSelection({ time: e.target.value })
const getSelection = e => {
e.preventDefault()
console.log({...firstSelection,...secondSelection})
}
const Form = () => {
return (
<form>
<div className='selectWrapper'>
<select name='color' value={firstSelection.color} onChange={handleFirstChange}>
<option value='red'>Red</option>
<option value='blue'>Blue</option>
<option value='yellow'>Yellow</option>
<option value='green'>Green</option>
</select>
</div>
<div className='selectWrapper'>
<select name='time' value={secondSelection.time} onChange={handleSecondChange}>
<option value='morning'>Morning</option>
<option value='evening'>Evening</option>
<option value='night'>Night</option>
</select>
</div>
<input type='submit' value='Submit' onClick={getSelection}/>
</form>
)
}
解决方法
尝试一下:
export default function Form() {
const [selection,setSelection] = useState({ color: "red",time: "morning" });
const handleChange = (e) => {
setSelection({ ...selection,[e.target.name]: e.target.value });
};
const getSelection = (e) => {
e.preventDefault();
console.log(selection);
};
return (
<form>
<div className="selectWrapper">
<select
name="color"
value={selection.color}
onChange={(e) => handleChange(e)}
>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
</div>
<div className="selectWrapper">
<select
name="time"
value={selection.time}
onChange={(e) => handleChange(e)}
>
<option value="morning">Morning</option>
<option value="evening">Evening</option>
<option value="night">Night</option>
</select>
</div>
<input type="submit" value="Submit" onClick={getSelection} />
</form>
);
}
,
您可以尝试使用name
s标记中的<select>
s作为状态对象的键来创建仅一种功能来更新状态。并将所有数据集中到一种状态。我将此单一状态称为formState
const [formState,setFormState] = useState({color: 'green',time: 'evening'})
const handleInput = e => setFormState({
...formState,[e.target.name]: e.target.value
})
const getSelection = e => {
e.preventDefault()
console.log(formState)
}
const Form = () => {
return (
<form>
<div className='selectWrapper'>
<select name='color' value={firstSelection.color} onChange={handleInput}>
<option value='red'>Red</option>
<option value='blue'>Blue</option>
<option value='yellow'>Yellow</option>
<option value='green'>Green</option>
</select>
</div>
<div className='selectWrapper'>
<select name='time' value={secondSelection.time} onChange={handleInput}>
<option value='morning'>Morning</option>
<option value='evening'>Evening</option>
<option value='night'>Night</option>
</select>
</div>
<input type='submit' value='Submit' onClick={getSelection}/>
</form>
)
}
,
您可以创建一个可重用的组件用于选择,并使用对象作为选择值,并通过输入名称进行检索
const CustomSelect = ({ name,options,value,onChange }) => {
return (
<div className="selectWrapper">
<select name={name} value={value} onChange={onChange}>
{options.map((option) => (
<option value={option.value}>{option.label}</option>
))}
</select>
</div>
);
};
export default function Form() {
const selectData = [
{
name: "color",options: [
{ label: "Red",value: "red" },{ label: "Blue",value: "blue" },{ label: "Yellow",value: "yellow" },{ label: "Green",value: "green" }
]
},{
name: "time",options: [
{ label: "Morning",value: "morning" },{ label: "Evening",value: "evening" },{ label: "Night",value: "night" }
]
}
];
const [selection,setSelection] = useState({
color: "green",time: "evening"
});
const getSelection = (e) => {
e.preventDefault();
console.log(selection);
};
return (
<div className="App">
<form>
{selectData.map((sd) => (
<CustomSelect
name={sd.name}
options={sd.options}
value={selection[sd.name]}
onChange={(event) =>
setSelection({
...selection,[event.target.name]: event.target.value
})
}
/>
))}
<input type="submit" value="Submit" onClick={getSelection} />
</form>
</div>
);
}
Codesandbox演示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。