onChange on input不使用setState更新状态

Posted 2021-05-05

我已声明存储数组，如['X'，'XL']，但我的代码不起作用我不知道为什么？

class App extends Component {
  state = {
    shirtsSize: ['X', 'XL']
  }
  handleChange = index => e => {
    const { shirtsSize } = this.state
    this.setState({
      [`${shirtsSize[index]}`]: e.target.value
    })
  }

  render() {
    const { shirtsSize } = this.state
    return (
      <div className="App">
        <label htmlFor="shirtsSize">Sizes</label>
        <button>+</button>

        {shirtsSize.map((lang, index) => (
          <input
            type="text"
            name="shirtsSize"
            id="shirtsSize"
            value={lang}
            onChange={this.handleChange(index)}
          />
        ))}
      </div>
    )
  }
}

无法发现错误在哪里。

答案

同

this.setState({
  [`${shirtsSize[index]}`]: e.target.value
})

你不是在更新qazxsw poi数组中的数据，而是创建一个像qazxsw poi这样的新键。你需要更新数组

shirtSize

或者干脆

shortsSize[0]

另一答案

好像你需要像：

const value = e.target.value;
this.setState(prevState => ({
  shirtsSize: [...prevState.shirtsSize.slice(0, index), value, ...prevState.shirtsSize.slice(index + 1) ]
}))