Question

我想创建一个普通的输入字段，允许用户输入，以及使用其父级的一些数据“自动完成”。

class SimpleForm extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            form_name: "",
            price: ""
        }
    }


    render()
    {
        return (
            <form>
                <div className="form-group">
                    <input value={this.state.form_name} onChange={(e) => { this.setState({form_name: e.target.value}) }}/>
                </div>
            </form>
        );
    }
}

class ParentOfForm extends React.Component
{
    render()
    {
        return (
            <SimpleForm howDoIsendToInputField="garbage" />


        )

    }

}

如果我在输入字段中使用defaultValue，我以后就无法更改它。如果我设置<input value={this.props.something}>，我无法修改输入字段...

Answer 1

将onChange和value保存在父Component中，并将其作为props传递：

class SimpleForm extends React.Component
{
    render()
    {
        return (
            <form>
                <div className="form-group">
                    <input value={this.props.value} onChange={this.props.onChange}/>
                </div>
            </form>
        );
    }
}

class ParentOfForm extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            form_name: "",
        }
        this.onChange = this.onChange.bind(this);
    }
    onChange(e) {
        this.setState({form_name: e.target.value})
    }
    render()
    {
        return (
            <SimpleForm howDoIsendToInputField="garbage" 
                        onChange={this.onChange}
                        value={this.state.form_name}/>


        )

    }
}

Answer 2

您使用道具ParentOfForm = howDoIsendToInputField初始化garbage。因此，您可能会重写SimpleForm的构造函数，以使用父窗体中的prop作为初始状态值：

constructor(props) {
  super(props);

  this.state = {
    form_name: props.howDoIsendToInputField,
  };
}

这样您就可以使用prop值预先填充输入字段。在React术语中，您的输入字段现在受到控制，因为您提供了特定值。

反应文档刚刚添加了一个新部分，说明了这一点：https://facebook.github.io/react/docs/forms.html#handling-multiple-inputs

您可以采取哪些措施来反映道具中的更改，即在componentWillReceiveProps组件中使用SimpleForm：

componentWillReceiveProps(nextProps) {
  this.setState({ form_name: nextProps.howDoIsendToInputField });
}

文档：https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops

如何允许输入字段进行修改？

2 个答案: