javascript - 更改状态中数组的特定索引而不是我的所有状态对象

Question

我正在复习 React。我在 App.js 中设置状态并创建一个名为 handleUserNameChange() 的事件来更改状态对象中的用户名。来自 UserInput.js 的每个输入都应更改其相对 UserOutput 组件的用户名状态，该用户名处于 App.js 中设置的状态。如何才能使当我在一个输入中键入文本时，它仅更改用户数组中状态的一个索引？我需要更改我的handleUserNameChange 事件吗？

应用程序.js

import React, { Component } from 'react';

//Components
import UserInput from './UserInput/UserInput';
import UserOutput from './UserOutput/UserOutput';

class App extends Component {

  state = {
    users: [
      {user: 'Debbie'},
      {user: 'Ronald'}
    ]
  };

  handleUserNameChange = (event) => {
    this.setState({
      users: [
        {user: event.target.value},
        {user: event.target.value}
      ]
    });
  };

  render() {
    return (
      <div className="App">
        <UserOutput
          username = {this.state.users[0].user}
        />

        <UserInput
          nameChange={this.handleUserNameChange} />

        <UserOutput 
          username={this.state.users[1].user}

        />
        <UserInput
          nameChange={this.handleUserNameChange}
        />
      </div>
    );
  }
}

export default App;

UserOuput.js

import React from 'react';

const UserOutput =(props) => {
  return (
    <div>
      <h3>{props.username}</h3>
    </div>
  );
}

export default UserOutput;

用户输入.js

import React from 'react';

const UserInput = (props) => {
  return (
    <div>
      <input type="text"
        onChange={props.nameChange}
      />
    </div>
  );
}

export default UserInput;

Answer 1

在 App.js 中:

<UserInput
  nameChange={this.handleUserNameChange(0)}//0 for first, 1 for second  
/>

handleUserNameChange = (index) => (event) => {
  this.setState({
    users: this.state.users.map(
      (user,i)=>
        (i===index)
          ? event.target.value
          : user
    )
  });
};

最好不要对用户 0 和用户 1 进行硬编码，而只是将状态映射到 react 模块。

render() {
  const userInput = index =>
    <UserInput
      nameChange={this.handleUserNameChange(index)} />;
  const UserOutput = user =>
    <UserOutput
      username = {user}/>;
  return (
    <div className="App">
      this.state.users.map(
        (user,index)=>
          <div>{userInput(index)}{UserOutput(user)}</div>
      )
    </div>
  );
}