Javascript 如何在reactjs中添加动态多文本字段

我想知道如何在reactjs中添加动态文本字段

单击行中的添加、删除按钮，添加和删除工作的动态行

但是对于字段

值

，有

+和x

图标表示添加和删除动态值文本字段。 这部分不起作用，卡住了

这是我的代码沙盒

---

我看到的问题是您使用了push方法来添加新值，但是.push方法返回数组的长度，而不是新数组的长度。而是使用concat方法。您需要更新addtextareaHandler方法，如下所示：

addtextareaHandler = (row) => {

    var newArray = [...this.state.additionalFields]
    newArray[row.id].value = row.value.concat("");
    this.setState({
      additionalFields: newArray
    })
  }

对于delete，您需要对dynamicTable组件进行如下更改，以获取要删除的值的索引

<td key={`tableview-td-${rowId}-${index}`}>
            <div style={contentareastyle}>
                {row[column.dataFieldId].map((datevalue,i) => {
                    return (
                        <div className="text-content" key= {`tableview-td-${rowId}-${index}`}>
                            <input type="text" value={datevalue} className="inputfield" readOnly />
                            <button className="btn-primary btntext" type="button" onClick={() => this.props.addtextarea(row)}>+</button>
                            <button className="btn-primary btntext" type="button" onClick={() => this.props.deletetextarea(row,i)}>x</button>
                        </div>
                    )
                })}
            </div>
        </td>

创建一个方法来处理值更改，如

handleValueChange = (event,row,i) => {
    var newArray = [...this.state.additionalFields];
    newArray[row.id].value[i] = event.target.value;
    this.setState({ additionalFields: newArray });
  }

将此添加到主元件中的动态表标记：

handleValueChange ={this.handleValueChange}

要在动态表组件中进行的更改。在输入标记中添加onChange事件

<div className="text-content" key={`tableview-td-${rowId}-${index}`}>
                            <input type="text" value={datevalue} className="inputfield" onChange={(event) => this.props.handleValueChange(event,row,i)}/>
                            <button className="btn-primary btntext" type="button" onClick={() => this.props.addtextarea(row)}>+</button>
                            <button className="btn-primary btntext" type="button" onClick={() => this.props.deletetextarea(row,i)}>x</button>
                        </div>

this.props.handleValueChange（事件，行，i）}/>
this.props.addtextarea（行）}>+
this.props.deletetextarea（行，i）}>x

---

工作解决方案：

非常感谢，但是当我在value中输入输入文本字段时，由于我删除了readOnly，所以无法输入also@codecat，您必须像这样进行事件绑定。@Harmandeep Singh Kalsi感谢您的回复，卡住了吗@codecat，您卡住了哪里，您能详细说明问题吗？这是有效的解决方案

<div className="text-content" key={`tableview-td-${rowId}-${index}`}>
                            <input type="text" value={datevalue} className="inputfield" onChange={(event) => this.props.handleValueChange(event,row,i)}/>
                            <button className="btn-primary btntext" type="button" onClick={() => this.props.addtextarea(row)}>+</button>
                            <button className="btn-primary btntext" type="button" onClick={() => this.props.deletetextarea(row,i)}>x</button>
                        </div>