将 textarea 值发送给 redux 动作创建者

Question

我有以下组件：

const myComponent = ({handleClick, default = ''}) => (
  <div>
    <textarea name="myTextArea" defaultValue={default}></textarea>
    <button onClick={(myTextArea) => handleClick(myTextArea})}>Done</button>
  </div>
)

调度映射：

 const mapDispatchToProps = (dispatch) => {
   return {
      handleClick: (myTextArea) => {
         console.log(myTextArea); // This is syntheticMouseEvent
      }
    }
  }

myTextArea 总是 syntheticMouseEvent

类型

我是不是做错了什么？我的价值在哪里？

Answer 1

您正在获取按钮单击事件，这与文本区域无关。有几种不同的方法可以处理事情。一种是实现 "controlled inputs" 模式并将文本区域的当前值保持在状态（Redux 状态或组件状态）中。另一种是将 "ref" 保存到文本区域，并在单击按钮时从真正的 DOM 元素中检索它的值。

作为我的 React/Redux 链接列表的一部分，我在 React and Forms 上有许多文章的链接，这些文章解释了 "controlled input" 模式是什么以及如何使用它。

将 textarea 值发送给 redux 动作创建者

Sending textarea value to a redux action creator

javascript

reactjs

redux

react-redux