如何处理多输入可编辑

Question

我在react中的多个输入中添加了动态值，然后尝试对其进行编辑，但它根本不可编辑。代码如下：

class Hotels extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { id: 1, hotel: { name: "Sentido" } },
        { id: 2, hotel: { name: "Maris" } },
        { id: 3, hotel: { name: "Orka" } },
        { id: 4, hotel: { name: "Resort " } },
        { id: 5, hotel: { name: "Green " } },
        { id: 6, hotel: { name: "Maris" } },
        { id: 7, hotel: { name: "Nature " } },
        { id: 8, hotel: { name: "Diamond " } },
      ],
    };
  }

  render() {
    return data.map((item, i) => (
      <input
        name={`hotel__${i}.name`}
        onChange={this.handleChange}
        value={item.hotel.name}
        type="text"
      />
    ));
  }
  handleChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };
}
ReactDOM.render(<Hotels></Hotels>, document.getElementById("app"));

我没有使用defaultValue属性，并且添加了onChange事件，但它不起作用！

Answer 1

输入的名称不正确。您应该使用item.hotel.name

render() {
    return data.map((item, i) => (
      <input
        name={item.hotel.name}
        onChange={this.handleChange}
        value={item.hotel.name}
        type="text"
      />
    ));
  }

那么您的句柄更改应该是

handleChange = (event) => {
    this.setState({ data: this.state.data.map( item => {
        if (item.hotel.name === event.target.name) {
           return { ...item, hotel: { name: event.target.value }}
        } else {
           return item
        }
   }) })
  };

记得将this.handlechange=this.handlechange.bind(this)添加到构造函数中