如何在react，redux-form中作为列表将字符串列表追加到文本区域？

Question

我打算开发一个如模型中所示的表单，当我点击添加管理按钮时，它应该从文本字段中获取值并附加到文本区域作为列表，当我提交表单时我应该能够发送文本区域值作为后端的数组。

我试过这个click here to see the code转到simpleform.js

我正在使用redux表单，我必须以相同的形式在多个地方创建相同的东西，有人可以建议如何以最佳方式做到这一点，我可以在多个地方重用相同的代码或组件。

Answer 1

你的沙箱...经过小修理

addEmail = (e) => {
  e.preventDefault()

似乎在列表中添加了元素（2个列表？）但是自定义textarea将数组作为值...

如果你需要为redux-form正确地完成它（我在使用formik后感到疼痛）你应该使用<FieldArray />和自定义渲染器。

我最低限度地修改了标准字段数组示例以使用textarea，可滚动文本div，可滚动项目列表来创建工作POC：

const renderHobbies = ({ fields, meta: { error } }) => {
  const val = Array.of(fields.getAll()).join('\n '); // docs claim getAll returns an array ;)
  console.log(val);
  return (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push("aaa")}>Add Hobby</button>
    </li>
    <textarea value={val}/> 
    <div style={{ overflowY: "auto", overflowWrap: "break-word", height:50, width:100}}>{val}</div>

    <div style={{ overflowY: "auto", height: 200 }}>
      {fields.map((hobby, index) => (

https://codesandbox.io/s/0m81vzjx3w

从输入中添加值应该不是问题 - 例如。标准setState，fields.push（this.state ...）

用户体验非常糟糕（Autodesk？），如果你知道应该有搜索one/multiline multi select component MUI，添加自定义值...