Reactjs 反应-将父值传递给子输入值

我是新手。 如何正确地将父值传递给子

设置状态

，我在下面有一个错误，我无法更改输入值，该值看起来正确，但无法更改

“正在将文本类型的非受控输入更改为受控。 输入元件不应从非受控切换到受控（或 反之亦然）。决定使用受控输入还是非受控输入 组件生命周期的元素“

导出默认类父类扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题：“”
}
}
updateFun（）{
this.setState（{title:'Parents title'}）；
}
render（）{
返回(
this.updateFun（）}>Update
)
}
}
导出默认类子类扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题：“”
}
}
render（）{
返回(
)
}
}

您需要使用

defaultValue

而不是

value

。您还必须将

onChange

处理程序添加到输入中。处理输入更改

儿童榜样

export default class Child extends React.Component {
constructor (props) {
    super(props);
    this.state = {
        title: props.title
    }

    this.handler = this.handler.bind(this);
}

handler(event) {
    console.log(event.target.value);

    this.setState({title: event.target.value});
}

render() {
    return (
        <div>
        <input 
            id="title" 
            type="text"
            defaultValue={this.state.title}
            onChange={this.handler}
            />
        </div>
    )
}}

导出默认类子组件{
建造师（道具）{
超级（道具）；
此.state={
标题：道具
}
this.handler=this.handler.bind（this）；
}
处理程序（事件）{
日志（event.target.value）；
this.setState（{title:event.target.value}）；
}
render（）{
返回(
)
}}

您需要使用

defaultValue

而不是

value

。您还必须将

onChange

处理程序添加到输入中。处理输入更改

儿童榜样

export default class Child extends React.Component {
constructor (props) {
    super(props);
    this.state = {
        title: props.title
    }

    this.handler = this.handler.bind(this);
}

handler(event) {
    console.log(event.target.value);

    this.setState({title: event.target.value});
}

render() {
    return (
        <div>
        <input 
            id="title" 
            type="text"
            defaultValue={this.state.title}
            onChange={this.handler}
            />
        </div>
    )
}}

导出默认类子组件{
建造师（道具）{
超级（道具）；
此.state={
标题：道具
}
this.handler=this.handler.bind（this）；
}
处理程序（事件）{
日志（event.target.value）；
this.setState（{title:event.target.value}）；
}
render（）{
返回(
)
}}

我认为错误不在这一部分，这段代码看起来是正确的，检查工作只有一个问题，父组件的名称，应该是父组件检查原因。我同意@MayankShukla。代码在您发布时运行良好。然而，你到底想做什么还不清楚。您希望子级拥有自己的状态，还是父级应该控制所有状态？您的孩子有一个从未使用过的头衔状态。也不清楚为什么你有一个按钮用静态文本更新输入值。我认为错误不在这一部分，这段代码看起来是正确的，检查工作只有一个问题，父组件的名称，它应该是父检查这一原因。我同意@MayankShukla。代码在您发布时运行良好。然而，你到底想做什么还不清楚。您希望子级拥有自己的状态，还是父级应该控制所有状态？您的孩子有一个从未使用过的头衔状态。也不清楚为什么你有一个按钮，用一个静态文本更新输入值。对我来说效果很好。还注意到可以避免构造函数块。谢谢。对我来说很好。还注意到可以避免构造函数块。谢谢