Question

我是新来的反应者，在学习过程中我遇到了受控组件的示例。

function App() {
  let [fName, setFName]=useState('');

  return (
    <div className="container">
      <h1>Hello {fName }</h1>
      <input name ='fname' value={fName} onChange={(e)=> setFName(e.target.value)} type="text" placeholder="What's your first name?" />

    </div>
  );
}

仅添加value={fName}个控件即可。我实际上不了解受控组件和不受控制的含义是什么。您能从初学者的角度解释它吗？

Answer 1

受控组件

这些组件具有称为回调函数的功能，每次我们在表单元素中输入新内容时都会触发该功能。

触发该函数通常会存储或更新我们在显示所用表单元素的同一React组件中键入的内容

最广泛用于forms

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

未部署的组件

诸如<input>之类的这些组件通常保持自己的状态，并根据用户输入对其进行更新。

换句话说，他们将接受我们键入的内容并有记住它的责任，为了检索他们记住的值，您必须在需要时获取它。

后者通常在表单提交期间发生。它们可以归类为不受控制的组件。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Answer 2

不受控制的组件意味着您将让组件本身管理值。它自己的内部机制会对其进行跟踪。

现在，当您将value属性添加到输入组件时，您将开始自己“控制”该组件。您输入该属性的值将是将显示的值。您可以直接按原样传递值，也可以通过在传递值之前更改值来自己控制值。

Answer 3

在这里，Reactjs文档提供了解释。

受控组件是一个通过props获取其当前值并通过诸如onChange之类的回调通知更改的组件。父组件通过处理回调并管理自己的状态并将新值作为道具传递给受控组件来“控制”它。您也可以将其称为哑组件/无状态组件。
一个不受控制的组件是一个内部存储其自身状态的组件，您可以使用ref查询DOM以在需要时找到其当前值。这有点像传统的HTML。

反应形式组件支持受控和不受控制的用法：

//不受控制：

<input type="text" defaultValue="hey" ref={inputRef} />

//受控的：

<input type="text" value={this.state.value} onChange={onHandleChange} />

React受控组件和非受控组件之间的区别

3 个答案: