javascript - react 创建通用输入组件

Question

我想使用钩子(Hook)制作一个通用输入组件，但不能 100% 确定如何实现它。

所以我有一个父组件

const Parent = () => {
   const [team, setTeam] = useState('');
   return <Input onChange={???} value={team} />
} 

然后我的 Input 组件如下所示。

const Input = ({onChange}) => {
   return <input onChange={onChange} />
}

我想知道状态应该存储在哪里。是在 Parent 组件中，还是在 Input 中，还是两者都需要存储状态？

Answer 1

只需使用绑定(bind)到 onChange 事件的箭头函数即可。然后使用您的钩子(Hook)中给出的 setTeam 回调:

const Parent = () => {
    const [team, setTeam] = useState('');
    return <Input onChange={ev => setTeam(ev.target.value)} value={team} />
}

此外，避免使用冗余的状态值。任何信息都应该只存储在使用它的组件中。

缩短的输入代码:

const Input = ({ onChange, value }) => <input onChange={onChange} value={value} />

或者:

const Input = props => <input {...props} />