React 中的数据绑定 [英] Data binding in React

问题描述

我想要做的是当我在输入字段中输入一些文本时，它应该实时出现在另一个地方.

以下是我的输入；

<input className='post_data_input_overlay' placeholder="在这里提问" ref="postTxt"/>

我怎样才能做到这一点?

解决方案

React 中的数据绑定可以通过使用受控输入来实现.受控输入是通过将值绑定到 状态变量 和 onChange 事件来实现的，以在输入值更改时更改状态.

见下面的片段

class App extends React.Component {构造函数(){极好的();this.state = { value: 'Hello World' };}handleChange = (e) =>{this.setState({ value: e.target.value });};使成为() {返回 (<div><输入类型=文本"值={this.state.value}onChange={this.handleChange}/><p>{this.state.value}</p>

);}}ReactDOM.render(, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script><div id="app"></div>

---

更新:React Hooks

这是上面定义的类的等效函数组件.

const { useState } = React;const App = () =>{const [value, setValue] = useState('Hello World');const handleChange = (e) =>setValue(e.target.value);返回 (<div><input type="text" value={value} onChange={handleChange}/><p>{值}</p>

);};ReactDOM.render(, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script><div id="app"></div>

What I want to do is when I type some text in an input field, it should appear in another place realtime.

Below is my input;

<div className="post_input">
    <input className='post_data_input_overlay' placeholder="Ask your question here" ref="postTxt"/>
</div>

How can I achieve that?

解决方案

Data binding in React can be achieved by using a controlled input. A controlled input is achieved by binding the value to a state variable and a onChange event to change the state as the input value changes.

See the below snippet

class App extends React.Component {
  constructor() {
    super();
    this.state = { value: 'Hello World' };
  }
  handleChange = (e) => {
    this.setState({ value: e.target.value });
  };
  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
        />
        <p>{this.state.value}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

---

Update: React Hooks

Here is an equivalent function component of the class defined above.

const { useState } = React;

const App = () => {
  const [value, setValue] = useState('Hello World');
  const handleChange = (e) => setValue(e.target.value);
  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>{value}</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

这篇关于React 中的数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！