Reactjs 子组件&x27；s输入字段不随父项的更改而更改'；道具起反应

我有一个带有

的ParentComponent和一个带有输入字段的ChildComponent，其类型和值取决于收到的

道具。正如代码中所清楚的，父组件的
onChangeHandler
更新其状态，并将其作为prop
数据发送给子组件，输入字段将更改为该子组件
我可以更改输入
类型
，但输入值没有更改，我使用
组件强制更新的
值={this.state.input}
，将接收props
。现在，我正在更新状态（代价是
您让我再次更新：/
两次），输入值没有变化。



请让我知道我遗漏了什么或我错在哪里，如果有更好的方法来实现这一点。
提前谢谢

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} /> )
    }
}

constparentcomponent=（）=>{
const[selectOpt，setSelectOpt]=useState（“”）
const onChangeHandler=（e）=>{
设置选择选项（例如目标值）
}
返回(
onChangeHandler（e）}>
文本
电子邮件
密码
)
}
类ChildComponent扩展组件{
状态={
输入：this.props.data
}
componentDidUpdate（）{
log（“您让我再次更新：/”）
}
组件将接收道具（下一步）{
if（nextrops.data！==this.props.data）{
this.setState（{input:nextrops.data}）
}
}
render（）{
返回（）
}
}
将道具置于其自身状态是一种不好的做法，因此您应该尽量避免这种情况。我真的不知道类型的prop属性是什么，所以我只想使用type=“text”：

constparentcomponent=（）=>{
const[selectOpt，setSelectOpt]=useState（“”）
const onChangeHandler=（e）=>{
设置选择选项（例如目标值）
}
返回(
文本
电子邮件
密码
)
}
const ChildComponent=（{data}）=>{
报税表（
)
}
我可以问您为什么要在子组件中设置
状态。输入
？看看你的代码，似乎你并不真的需要它，因为你从父母那里收到的信息是
prop
，你没有以任何方式修改它。我看到这个附加值和状态是更新输入字段的解决方案，这就是为什么我写它来表明我也尝试过这样做。。。但这仍然不起作用，我认为OP希望显示不同的
类型，这取决于在父组件中选择的内容
ChildComponent
应该返回
（或者更好的情况是，
）而不是

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} /> 
    )
}