子组件的输入字段不随父组件道具的变化而变化

Question

我有一个带有<select>的父组件和一个带有输入字段的子组件，其类型和值取决于收到的props。正如代码中明确指出的那样，父组件的onChangeHandler更新其状态，并将其作为 propdata发送到子组件，输入字段应更改为子组件。
我可以更改输入type但输入值没有更改，我对此做了value={this.state.input}，这是用componentWillRecieveProps强制更新的。现在我正在更新状态(价格为You got me updated again :/两次)，输入值没有变化。

请让我知道我错过了什么或我错在哪里，以及是否有更好的方法来实现这一目标。 提前谢谢。

const ParentComponent = () => {
const [selectOpt, setSelectOpt] = useState("")
const onChangeHandler = (e) => {
setSelectOpt(e.target.value)
}
return (
<select onChange={(e)=>onChangeHandler(e)}>
<option value="text">text</option>
<option value="email">email</option>
<option value="password">password</option>
</select>
<ChildComponent data={selectOpt} />
)
}
class ChildComponent extends Component {
state = {
input:this.props.data
}
componentDidUpdate() {
console.log("You got me updated again :/")
}
componentWillReceiveProps(nextProps){
if(nextProps.data !== this.props.data){
this.setState({ input:nextProps.data })
}
}
render(){
return( <input type={this.props.data} value={this.state.input} /> )
}
}

Answer 1

我一直在处理类似的问题，有帮助的是设置子组件上的"键"。当"键"更改时，它指示应刷新组件。

你可以试试这个：

<ChildComponent key={selectOpt} data={selectOpt}/>

Answer 2

将道具置于自己的状态是一种不好的做法，因此您应该尽量避免这种情况。我真的不知道类型的 prop 属性是什么，所以我只使用 type="text"：

const ParentComponent = () => {
const [selectOpt, setSelectOpt] = useState("")
const onChangeHandler = (e) => {
setSelectOpt(e.target.value)
}
return (
<select onChange={onChangeHandler}>
<option value="text">text</option>
<option value="email">email</option>
<option value="password">password</option>
</select>
<ChildComponent data={selectOpt} />
)
}
const ChildComponent = ({ data }) => {
return ( 
<input type="text" value={data} /> 
)
}