我想要做的是当我在输入字段中输入一些文本时，它应该实时出现在另一个地方。
以下是我的输入；
<div className="post_input">
<input className='post_data_input_overlay' placeholder="Ask your question here" ref="postTxt"/>
</div>
我怎样才能做到这一点？
React 中的数据绑定
IT技术
reactjs
2021-04-29 00:35:11
4个回答
React 中的数据绑定可以通过使用controlled input. 受控输入是通过将值绑定到 astate 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>更新：react-hooks
这是上面定义的类的等效功能组件。
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 中，没有双向数据绑定。
因此，当您想要实现该功能时，请尝试定义一个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.html
随着React hooks的引入，状态管理（包括表单状态）变得非常简单，在我看来，与其他框架的魔法相比，它更易于理解和预测。例如：
const MyComponent = () => {
const [value, setValue] = React.useState('some initial value');
return <input value={value} onChange={e => setValue(e.target.value)} />;
}
这种单向流程使得了解数据如何更新以及何时发生渲染变得微不足道。简单但功能强大，可以以可预测和清晰的方式完成任何复杂的事情。在这种情况下，请执行“双向”表单状态绑定。
该示例使用原始字符串值。复杂的状态管理，例如。对象、数组、嵌套数据也可以通过这种方式进行管理，但在库的帮助下更容易，比如Hookstate（免责声明：我是这个库的作者）。这是复杂状态管理的示例。
当表单增长时，渲染性能会出现问题：在任何表单字段上的每次击键时，表单状态都会改变（因此需要重新渲染）。Hookstate 也解决了这个问题。这是具有 5000 个字段的表单示例：每个密钥库上的状态都会更新，并且完全没有性能延迟。
要将控件绑定到您的状态，您需要调用组件上的函数，该函数从控件的事件处理程序更新状态。
您可以使用 ES6 计算名称功能创建一个通用的更新函数，并将它需要的值从控件内联传递给它，而不是为所有表单字段设置更新函数，如下所示：
class LovelyForm extends React.Component {
constructor(props) {
alert("Construct");
super(props);
this.state = {
field1: "Default 1",
field2: "Default 2"
};
}
update = (name, e) => {
this.setState({ [name]: e.target.value });
}
render() {
return (
<form>
<p><input type="text" value={this.state.field1} onChange={(e) => this.update("field1", e)} />
{this.state.field1}</p>
<p><input type="text" value={this.state.field2} onChange={(e) => this.update("field2", e)} />
{this.state.field2}</p>
</form>
);
}
}
ReactDOM.render(<LovelyForm/>, document.getElementById('example'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="example"></div>其它你可能感兴趣的问题