Question

我是reactjs的新手。将父值传递给子setState的正确方法是什么，我在下面说错误，我无法更改输入值，该值看起来正确但无法更改。

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

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

    updateFun(){
        this.setState({title: 'Parents title'});
    }

    render() {
        return (
            <div>
            <button onClick={() => this.updateFun()}> Update </button>
            <Child title = {this.state.title}/>
            </div>
        )
    }
}


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

    render() {
        return (
            <div>
            <input 
                id="title" 
                type="text"
                value={this.props.title}
                />
            </div>
        )
    }
}

Answer 1

您需要使用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>
    )
}}

react - 将父值传递给子输入值

1 个答案: