gpt4 book ai didi

reactjs - React 中的数据绑定(bind)

转载 作者:行者123 更新时间:2023-12-03 12:57:01 30 4
gpt4 key购买 nike

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

以下是我的输入;

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

我怎样才能实现这一目标?

最佳答案

React 中的数据绑定(bind)可以通过使用受控输入来实现。受控输入是通过将值绑定(bind)到状态变量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>

关于reactjs - React 中的数据绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42217579/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com