Question

我正在尝试使用React的useReducer处理多个输入，一切正常。但是，当我尝试为输入设置值时，我无法编辑其值。

我正在使用React v16.8.6

// input tag
<input type="text" name="strWork" value={stateUserInput.strWork} onChange={handleInputChange} />;

// use useReducer to handle Multiple Inputs
const [stateUserInput, dispatchSetUserInput] = useReducer((state, newState) => ({ ...state, ...newState }), {
  strWork: '',
});

function handleInputChange(event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;

  dispatchSetUserInput({ [name]: value });
}

// try to set value on input in useEffect Hook, but then I can't edit it
useEffect(() => {
  dispatchSetUserInput({
    strWork: 'Hello world',
  });
});

我希望我可以编辑输入的值，但是不能，并且控制台选项卡上没有错误。

Answer 1

我刚刚找到了解决分配值时无法编辑输入的问题的方法：为useEffect添加依赖项。工作正常！

我们拥有的isSelected是价值为“ Hello world”的道具

  useEffect(() => {
  dispatchSetUserInput({
    strWork: isSelected,
  });
},[isSelected])

另一种方法：找到了一种使用useState Hook修复此问题的方法（也用于多个输入）：

我们有2个输入：

<input className="form-control mr-1" type="text" name="strWork" placeholder="Nhập công việc..." value={inputForm.strWork} onChange={handleChangeInputForm} />
<select name="strLevel" value={inputForm.strLevel} onChange={handleChangeInputForm}>
    <option value={0}>Low</option>
    <option value={1}>Normal</option>
    <option value={2}>High</option>
 </select>

使用React的useState处理多个输入：

const [inputForm, setInputForm] = useState({
        strWork: '',
        strLevel: 2
    })
const handleChangeInputForm = (event) => {
        const target = event.target
        const value = target.type === 'checkbox' ? target.checked : target.value
        const name = target.name
        setInputForm(prev => ({ 
            ...prev,
            [name]: value
        }))
    }

在上面设置值（您仍然可以对其进行编辑）：

useEffect(() => {
        if (isSelected !== null) {
            setInputForm(prev => ({ 
                ...prev,
                strWork: isSelected.name,
                strLevel: isSelected.level
            }))
        }
    },[isSelected])

使用useReducer挂钩分配值时无法编辑输入

1 个答案: