Question

我正在尝试在输入元素时实时更新p元素。以下React代码完美运行。但是，如果我从value元素中完全删除input属性，则代码STILL会起作用！

class ControlledInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: ''
        };
    }
    handleInput = (event) => {
        this.setState({
            input: event.target.value
        });
    }
    render() {
    return (
        <div>
        <input
            value={this.state.input}
            onChange={this.handleInput} />
        <p>Input: {this.state.input}</p>
        </div>
    );
  }
};

所以我的问题是：

value={this.state.input}行做什么？
为什么程序在没有那条线路的情况下仍能正常工作？

Answer 1

value={this.state.input}将表单的值分配给组件的输入框。 您的代码仍然有效，因为当您更改文本框中的文本并且react不会重新呈现您的输入时，事件处理程序仍然会触发。输入值的状态隐含在DOM的状态中但这种状态不是来自你的组件。

如果您有两个使用相同状态的输入，那么当您键入时，第二个输入将不会更新。这是您可以看到与预期不同的地方，因为您省略了value={this.state.input}。如果在两个输入值中包含该值，则文本框将相互镜像。

class ControlledInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: ''
        };
    }
    handleInput = (event) => {
        this.setState({
            input: event.target.value
        });
    }
    render() {
    return (
        <div>
        <input
            onChange={this.handleInput} />
        <p>Input: {this.state.input}</p>



        <input
            onChange={this.handleInput} />
        <p>Input: {this.state.input}</p>
        </div>
    );
}
};

在上面的代码中，当两者都具有相同的状态时，其中一个输入将不会更新：）

Answer 2

值= {this.state.input}行是做什么的？

此行使用状态变量input从输入设置value属性，在您的情况下，它将在开始时使用''（无）初始化它（即，这相当于{{ 1}}）如果您将<input value="" ...>更改为

this.state.input

您应该在程序启动时看到输入值如何更改为this.state = { input: 'foo' };。

为什么程序在没有那条线的情况下仍能正常工作？

因为您已经在开始时将其设置为空，所以它实际上不会更改程序中的任何内容。您的foo事件处理程序仍然会触发。

为什么以下React代码有效？

2 个答案: