Question

我正在做一个React复习。我在App.js中设置了状态，并创建了一个名为handleUserNameChange（）的事件来更改状态对象中的用户名。来自UserInput.js的每个输入都应该在App.js中设置的状态下更改它的相对UserOutput组件的用户名。我怎么能这样做，当我在一个输入中键入文本时，它只改变我的用户数组中的一个索引状态？我是否需要更改handleUserNameChange事件？

App.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;

UserInput.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进行硬编码，而只是将状态映射到反应模块。

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

Answer 2

从渲染函数传递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>
);

}

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

2 个答案: