时间戳

首页 > 解决方案 > 从事件对象中的文本区域输入中获取值

reactjs - 从事件对象中的文本区域输入中获取值

问题描述

我有一个带有文本区域的表单，用户可以在其中放置评论，然后触发 onClick（当表单通过按钮提交时）。但是，我无法获取输入的值，例如，如果用户写“测试”，我希望它进入 handleSubmit 函数。

我的表格

<form onSubmit={this.handleSubmit.bind(this)} method="POST">
    <label>Skicka</label>
    <textarea placeholder="Type in comments (allergis etc.)" name ="name" ref ="name"></textarea>

    <button className="btn" type="submit">
        Send
    </button>
</form>

//我的处理程序

public handleSubmit = event => {
    event.preventDefault();
    console.log(event.name.value)
}

标签： reactjs

解决方案

当您使用Uncontrolled Component. 你可以利用ref来获得价值。

handleSubmit = (event) => {
  event.preventDefault();
  console.log(this.refs.name.value)
}

演示

注意：在 React 中，你永远不应该添加method="POST"和action属性的 on form。

不要public在函数中添加关键字（如果您不使用打字稿）。

处理表单值的更好方法是Controlled Component

推荐阅读