reactjs - 如何处理多个输入的状态并从父级更改它们的状态？

Question

我有一个具有编辑模式的自定义输入组件，我使用多个输入，我的目标是从输入中提取所有状态并将其放在父级上。

我设法为输入值做到这一点，因为我为每个输入创建了一个 useState，但是我怎样才能为切换行为实现同样的事情。我想在每个输入旁边有一个按钮来切换输入的状态。（显示/隐藏输入）。

现在，当我按下编辑时，所有编辑布尔值都会被触发，因此所有输入都变得可见。

如何从父级一次切换一个输入，基本上我希望我的自定义组件纯粹用于演示，并且状态应该存在于父级上

例子：

const Parent = () => {
  const [value1, setValue1] = useState('')
  const [value2, setValue2] = useState('')
  const [value3, setValue3] = useState('') 


  const [editMode, setEditMode] = useState(false)

  return (
    <div>
      <ChildCustomInput value={value1} updateValue={setValue1} editMode={editMode} updateEditMode={setEditMode} />
      <ChildCustomInput value={value2} updateValue={setValue2} editMode={editMode} updateEditMode={setEditMode}/>
      <ChildCustomInput value={value3} updateValue={setValue3} editMode={editMode} updateEditMode={setEditMode}/>
    </div>
  )
}


const ChildCustomInput = (props)=> {
  // ref to update the input's value in the parent
  const textInputEl = useRef(null)

  // method to update the parent's values
  const updateComponentValue = () => {
    props.updateValue(textInputEl.current.value)
    props.updateEditMode(!props.editMode)
  }

  // Toggle Edit mode
  const changeEditMode = () => {
    props.updateEditMode(!props.editMode)
  }

  const renderEditView = () => {
    return (
      <div>
        <input ref={textInputEl}></input>
        <button onClick={updateComponentValue}>
          OK
        </button>
      </div>  
    )
  }


  const renderDefaultView = () => {
    return (
      <div>
        <div>
          {props.value}
        </div>

        <button onClick={changeEditMode}>
          EDIT
        </button>
      </div>
    )
  }


  return (
    <div>
    {
      props.editMode 
        ? renderEditView() 
        : renderDefaultView()
     }
    </div>
 )
} 



export default Parent;

标签： reactjsreact-hooks

Answer 1

似乎您的每个输入（即editMode1、editMode2、editMode3）都需要在父状态中使用editMode 布尔值，并且每个ChildCutomInput 应该使用自己的editModeX 和setEditModeX 而不是共享相同的布尔值。

const Parent = () => {
  const [value1, setValue1] = useState('');
  const [value2, setValue2] = useState('');
  const [value3, setValue3] = useState('');


  const [editMode1, setEditMode1] = useState(false);
  const [editMode2, setEditMode2] = useState(false);
  const [editMode3, setEditMode3] = useState(false);

  return (
    <div>
      <ChildCustomInput value={value1} updateValue={setValue1} editMode={editMode1} updateEditMode={setEditMode1} />
      <ChildCustomInput value={value2} updateValue={setValue2} editMode={editMode2} updateEditMode={setEditMode2}/>
      <ChildCustomInput value={value3} updateValue={setValue3} editMode={editMode3} updateEditMode={setEditMode3}/>
    </div>
  )
}