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

Question

我正在做一个 React 复习。我在 App.js 中设置状态并创建了一个名为 handleUserNameChange() 的事件来更改状态对象中的用户名。来自 UserInput.js 的每个输入都应该在 App.js 中设置的状态下更改它的相对 UserOutput 组件的用户名。我怎样才能使当我在一个输入中键入文本时，它只会更改用户数组中的一个索引状态？我需要更改我的 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;

用户输出.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;

标签： javascriptreactjs

Answer 1

handleUserNameChange从渲染函数传递函数中的索引值并使用双箭头handleUserNameChange获取索引值。

handleUserNameChange = index => event => {
    this.setState(prevState => {
       const users = [...prevState.users];
       users[index].user = event.target.value;
       return { users };
    });
};

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

}