Question

我正在尝试使用拼接删除某个位置的文本区域。拼接数组时，它按预期出现。但是出于某种原因，最后的文本区域是要删除的文本区域，而不是我要删除的文本区域。

我已经尝试使用2个不同的数组，但是结果相同。我不确定还有什么尝试。

class App extends Component {

  state = {
    pro : []
  }

  //onclick add a textarea
  onclick = () => {

    let arr = this.state.pro;

    arr = this.state.pro.concat(0);

    this.setState(
      {
        pro : arr
      }
    )

    console.log(arr);
  }

  //change the text content of a textarea at an index

  onchange = (i, e) => {
    let arr = this.state.pro;

    arr[i] = e.target.value;

    this.setState(
      {
        pro : arr
      }
    )
  }

  remove = (i, e) => {
    let arr = this.state.pro
     arr.splice(i, 1)

     this.setState(
      {
          pro: arr
      })
  }

  render() {

    console.log(this.state.pro)

    return (
      <div>

        {this.state.pro.map((con, k) => 
            <div key = {k}>
              <textarea key = {k} onChange = {this.onchange.bind(this, k)}></textarea>
              <button onClick = {this.remove.bind(this, k)}>-</button>
            </div>
        )}

        <button onClick = {this.onclick}>+</button>
      </div>
    );
  }
}

没有错误消息。预期的结果是，当我按下旁边的减号按钮时，CORRECT文本区域将被删除。不是每次都顶。

Answer 1

因为您的textarea值不受您的状态控制。

在value中设置角色textarea
如果使用箭头功能，则无需绑定
key对textarea不是必需的

return (
            <div>

                {this.state.pro.map((con, k) =>
                    <div key = {k}>
                        <textarea value={con} onChange = {(e) => this.onchange(k, e)}/>
                        <button onClick = {(e) => this.remove(k, e)}>-</button>
                    </div>
                )}

                <button onClick = {this.onclick}>+</button>
            </div>
        );

如何删除正确的文本区域？

1 个答案: