Question

我试图根据输入到textarea中的值来设置要素状态，即数组。我没有设置功能状态的运气。当我按下一个键时，该键成为该状态下的下一个索引值。如果我按下另一个键，则该键将成为该状态下的下一个索引值。因此，如果我将要素的初始状态手动设置为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]
    }));
  };

这是我每次用户点击Enter时尝试创建新文本区域的方式：

  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：根据textarea输入将状态设置为数组

1 个答案: