React 中的数据绑定

Question

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

以下是我的输入；

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

我怎样才能做到这一点？

原文由 CraZyDroiD 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React 中的数据绑定可以通过使用 controlled input 来实现。通过将值绑定到 state variable 和 onChange 事件来实现受控输入，以在输入值更改时更改状态。

请参阅下面的片段

 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>

---

更新：反应钩子

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

 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>

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

简而言之，在 React 中，没有双向数据绑定。

所以当你想实现那个功能时，试着定义一个 state ，然后像这样写，监听事件，更新状态，React 为你渲染：

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

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

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

  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

详情在这里 https://facebook.github.io/react/docs/forms.html

2020 年更新

注意：

LinkedStateMixin 从 React v15 开始被弃用。建议显式设置值和更改处理程序，而不是使用 LinkedStateMixin。

以上更新来自 React 官方 网站。如果您在 React 的 v15 下运行，请使用下面的代码，否则 不要。

实际上有人想用双向绑定来编写，但 React 不能那样工作。如果你确实想那样写，你必须使用 React 的插件，如下所示：

 var WithLink = React.createClass({
  mixins: [LinkedStateMixin],
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('message')} />;
  }
});

详情在这里 https://facebook.github.io/react/docs/two-way-binding-helpers.html

对于 refs ，它只是一个允许开发人员在组件方法中访问 DOM 的解决方案，请参见此处 https://facebook.github.io/react/docs/refs-and-the-dom。网页格式

原文由 jiyinyiyong 发布，翻译遵循 CC BY-SA 4.0 许可协议