Question

我是React的新手，如果这是一个非常愚蠢的问题，我深表歉意。

我已经向Person组件添加了一个click事件。

单击后，我只希望更改目标名称。

问题是，当单击该名称时，所有4个元素都会更改，而不仅仅是目标。

我认为错误非常明显，但是直到今天才真正使用过React，我不知道从哪里开始！

这里是People.js

import React, { Component } from 'react';
import './People.css';

import Person from "../Person/Person"
import '../Person/Person.css'

class People extends Component {

  state = {
    persons: [
      {name: "Theresa", age: 65, location: "London"},
      {name: "Matthew", age: 45, location: "Birmingham"},
      {name: "Jeremy", age: 56, location: "Norwich"},
      {name: "Vince", age: 78, location: "Oxford"}
    ]
  }

  personClickHandler = (newName) => {

    console.log(newName)

    this.setState({
      persons: [
        {name: newName, age: 65, location: "London"},
        {name: newName, age: 45, location: "Birmingham"},
        {name: newName, age: 56, location: "Norwich"}
        {name: newName, age: 72, location: "Oxford"}
      ]
    })

  };

  render() {
    return (
      <div className="People">

        <Person
          className="Person"
          name={this.state.persons[0].name}
          age="24"
          location="Leigh-on-Sea, Essex"
          click={this.personClickHandler.bind(this, "Boris")}
        />

        <Person
          className="Person"
          name={this.state.persons[1].name}
          age="22"
          location="Westcliff-on-Sea, Essex"
          click={this.personClickHandler.bind(this, "Jacob")}
        />

        <Person
          className="Person"
          name={this.state.persons[2].name}
          age="18"
          location="Thundersley, Essex"
          click={this.personClickHandler.bind(this, "Kier")}
        />

        <Person
          className="Person"
          name={this.state.persons[3].name}
          age="51"
          location="Orange County, California"
          click={this.personClickHandler.bind(this, "Lucy")}
        />

      </div>

    );
  }
}

export default People

这是Person.js

import React from 'react'

const Person = (props) => {
    return (
        <div 
        onClick={props.click}
        className="Person">
            <h2>{props.name}</h2>
            <p>{props.age}</p> 
            <p>{props.location}</p> 
      </div>
    )

}

export default Person

Answer 1

在函数personClickHandler中，将所有四个名称设置为相同的newName。您只需要更改其中一个名称即可。

如果将状态移到每个Person上，而不是通过容器类来管理状态，则可以轻松得多。

您还可以使用类似的东西。

render() {
  return (
    <div className="People">
      {this.state.persons.map( ( person, index ) => {
        return <Person
          key={index}
          className="Person"
          name={person.name}
          age={person.age}
          location={person.location} />
      })}
    </div>
  )
}

..这样您不必手动输入太多内容。

Answer 2

这不是最熟练的解决方案，但是您可以执行以下操作以达到目的

 personClickHandler = newName => {
console.log(newName);
if (newName === "Lucy") {
  this.setState({
    persons: [
      { name: "Theresa", age: 65, location: "London" },
      { name: "Matthew", age: 45, location: "Birmingham" },
      { name: "Jeremy", age: 56, location: "Norwich" },
      { name: newName, age: 78, location: "Oxford" }
    ]
  });
} else if (newName === "Boris") {
  this.setState({
    persons: [
      { name: newName, age: 65, location: "London" },
      { name: "Matthew", age: 45, location: "Birmingham" },
      { name: "Jeremy", age: 56, location: "Norwich" },
      { name: "Vince", age: 78, location: "Oxford" }
    ]
  });
} else if (newName === "Jacob") {
  this.setState({
    persons: [
      { name: "Theresa", age: 65, location: "London" },
      { name: newName, age: 45, location: "Birmingham" },
      { name: "Jeremy", age: 56, location: "Norwich" },
      { name: "Vince", age: 78, location: "Oxford" }
    ]
  });
} else {
  this.setState({
    persons: [
      { name: "Theresa", age: 65, location: "London" },
      { name: "Matthew", age: 45, location: "Birmingham" },
      { name: newName, age: 56, location: "Norwich" },
      { name: "Vince", age: 78, location: "Oxford" }
    ]
  });
}

};

单击一个元素时，所有元素的文本都会更改，而不仅仅是目标文本

2 个答案: