Question

我想使用钩子来创建通用输入组件，但不能100％确定如何实现此实现。

所以我有一个父组件

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

然后我的Input组件看起来像这样。

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

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

Answer 1

只需使用绑定到setTeam事件的箭头函数。然后使用其中的钩子中给出的const Parent = () => { const [team, setTeam] = useState(''); return <Input onChange={ev => setTeam(ev.target.value)} value={team} /> }回调：

Input

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

缩短的const Input = ({ onChange, value }) => <input onChange={onChange} value={value} />代码：

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

或：

{{1}}

反应创建通用输入组件

1 个答案: