将表单选择中的多个属性设置为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演示