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>
        )
      }
    }

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

Answer 1

从地图中返回元素时，必须为其分配一个键，否则将始终在新渲染器上创建该元素的新实例。另外，您不得在渲染

中创建组件

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

Answer 2

因为每次重新渲染，它都会从状态创建组件值的新实例，

您需要取消使用该功能，或者只是像这样使用它

render() {
  console.log('render');  
    return (
      <div>
         {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>);})
         }
      </div>
    )
  }
}

Demo

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

2 个答案: