javascript - React JS 输入类型文本在按键后失去焦点

Question

Fiddle Demo 我正在尝试更新包含数据对象数组的状态数组。

构造函数中的状态:

this.state = {
        data: [
        { name: "Abc", age: 12 },
        { name: "Xyz", age: 11 }
      ]
    }

处理程序:

handleName(idx, e){
        const data = this.state.data.map((item, sidx) => {
            if (idx !== sidx) return item;
            return { ...item, name: e.target.value };
        });

        this.setState({ data: data });
  }

  handleAge(index, e){
        const data = this.state.data.map((item, sidx) => {
            if (idx !== sidx) return item;
            return { ...item, age: e.target.value };
        });

        this.setState({ data: data });
  }

渲染方法:

render() {
      console.log('render');

        const Input = () => this.state.data.map((item, index) =>{
            return (
            <div>
              <input type="text" value={item.name} onChange={(e) => this.handleName(index, e)}/>
              <input type="text" value={item.age} onChange={(e) => this.handleAge(index, e)}/>
            </div>
          );
        });

        return (
            <div>
             <Input/>
          </div>
        )
      }
    }

我知道每次击键时渲染方法都会刷新 dom，这是我的渲染元素出了问题。 有什么建议 ？

Answer 1

从 map 中返回元素时，您必须为它们分配一个键，否则将始终在新渲染上创建它的新实例。另外，您不能在渲染中创建组件

render() {
  console.log('render');

    return (
      <div>
         {this.state.data.map((item, index) =>{
        return (
        <div key={index}>
          <input type="text" value={item.name} onChange={(e) => this.handleName(index, e)}/>
          <input type="text" value={item.age} onChange={(e) => this.handleAge(index, e)}/>
        </div>
      );
    })}
      </div>
    )
  }
}

<强> Working DEMO