将表单选择的多个属性设置为状态

Question

代码重复

所以我试图拥有一个初始状态对象，例如：{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>
    )
}

Answer 1

试试这个：

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>
  );
}

Answer 2

您可以尝试只创建一个函数来更新状态，该函数使用 <select>s 标签的 names 作为状态对象的键。并将所有数据集中到一个状态。我将这个单一状态称为 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>
    )
}

Answer 3

您可以为 select 创建一个可重复使用的组件，并为 selection 值使用对象，通过输入名称

检索

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 演示

将表单选择的多个属性设置为状态

Set multiple properties from a form selection to state

javascript

state

object

code-duplication

reactjs