javascript - 将 Input 的值传递给 handleMethod
问题描述
任务是将输入的每个字符传递给handleExchange
方法。在这种方法中,会发生输入值的处理。
如何将输入标签传递给handleExchange
方法的参数?
function App() {
function handleExchange(value) {
console.log(value)
}
return (
<input className = "input-r" placeholder = "Type here" />
)
}
ReactDOM.render(<App /> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
我试图这样做:
function App() {
function handleExchange(value) {
console.log(value);
}
return (
<div>
<input className="input-r" placeholder="Type here" onKeyPress={handleExchange(this.value)} />
{/*or*/}
{/* onKeyPress={handleExchange(event) */}
</div>
)
}
ReactDOM.render(<App />, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
解决方案
您必须使用onChange
事件并从中获取价值event.target
。
你有例子:
function App() {
function handleExchange(e) {
console.log(e.target.value);
}
return (
<div>
<input className="input-r" placeholder="Type here" onChange={handleExchange} />
{/*or*/}
{/* onKeyPress={handleExchange(event) */}
</div>
)
}
ReactDOM.render(<App />, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
推荐阅读
- java - java - 如何在忽略excel公式的Java中编写excel文件?
- php - Laravel Tinker 错误:Symfony\Component\Debug\Exception\FatalThrowableError:调用未定义的方法 Psy\Configuration::getLoop()
- php - move_uploaded_file 函数未上传到服务器
- amazon-web-services - 通过 REST (Jax-RS) 从 Amazon S3 下载文件
- javascript - Javascript 对象属性被 setInterval 调用的方法报告为未定义
- r - R中文本文件中的特定字符(“)出现问题
- r - 如何在 R 的命令行中自动列出许多元素?
- ios - CallKit 交换按钮 没有声音
- android - 具有来自过滤器的可变内容的 PageList 不会刷新
- angular - RxJS 在一个流中分配 observable 并获取数据