React 受控组件和非受控组件的区别答案

【问题标题】：Difference between React controlled component and uncontrolled componentReact 受控组件和非受控组件的区别
【发布时间】：2019-12-17 07:19:38
【问题描述】：

我是新手，在学习时遇到了这个受控组件的例子。

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} 即可控制。我实际上不明白受控组件和不受控是什么意思。你能从初学者的角度解释一下吗？

【问题讨论】：

标签： reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

React 表单组件支持受控和不受控的使用：

// 不受控制：

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

// 受控：

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

【讨论】：

【解决方案3】：

受控组件

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

触发该函数通常会存储或更新我们在显示所用表单元素的同一 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>
    );
  }
}

【讨论】：