React：根据文本区域输入将状态设置为数组

Question

我正在尝试根据对文本区域的输入来设置功能状态，它是一个数组。我没有运气设置功能状态。当我按下一个键时，该键成为状态中的下一个索引值。如果我按下另一个键，该键将成为状态中的下一个索引值。因此，如果我手动将特征的初始状态设置为 features: ["First", "Second", "Third"],，如果我按 f 然后按 d

，结果将是 features: ["First", "Second", "Third", "Firstf" , "Firstd"]

相关州

class CreateItem extends Component {
  state = {
    features: [""],
  };

这就是我尝试基于状态创建文本区域的方式

                <label htmlFor="features">
                  Features
                  {this.state.features.map((feature, i) => (
                    <div key={i}>
                      <textarea
                        key={i}
                        type="features"
                        placeholder={`${feature}`}
                        name={`features.${i}`}
                        value={this.state.features[`${i}`]}
                        onChange={this.handleFeatureArrayChange}
                        onKeyDown={this.keyPress}
                      />
                    </div>
                  ))}
                </label>

这里是 handleChange

  handleFeatureArrayChange = e => {
    const { name, type, value } = e.target;
    this.setState(prevState => ({
      [name]: [...prevState.features, value]
    }));
  };

这就是我在每次用户按下回车键时尝试创建新文本区域的方式：

  keyPress = e => {
    if (e.keyCode == 13) {
      this.setState({
        features: this.state.features.concat("")
      });
    }
  };

Answer 1

问题是你只是在每次按下一个键时附加到状态。

  handleFeatureArrayChange = e => {
    const { name, type, value } = e.target;
    this.setState(prevState => ({
      [name]: [...prevState.features, value] // this is effectively the same as .concat(value)
    }));
  };

您想更新当前索引处的值。尝试将输入的名称更改为 key，然后改为映射

  handleFeatureArrayChange = e => {
    const { name, type, value } = e.target;
    this.setState(prevState => ({
      features: prevState.features.map((feat, key) => {
        if (key == name) {
          return value
        } else
          return feat;
        }
      )
    }));
  };

React：根据文本区域输入将状态设置为数组

React: Setting state to an array based on textarea input

javascript

setstate

reactjs