javascript - 为什么下面的 React 代码可以工作？

Question

我试图在输入元素上键入时实时更新 p 元素。下面的 React 代码可以完美运行。但是，如果我从 input 元素中完全删除 value 属性，代码仍然有效!

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

在上面的代码中，当两个输入应具有相同状态时，其中一个输入将不会更新:)