#javascript #reactjs
Вопрос:
я новичок, начинающий с react js. что я пытаюсь здесь сделать, так это изменить имя животного, когда я нажимаю кнопку под именем. ( например, измените racoon на allegator, когда я нажму кнопку )
это код родительского компонента.
import React, { Component } from "react";
import Child from "./Child";
class Parent extends Component {
state = {
animals: [
{ id: 1, name: "racoon", secondName: "allegator", bool: false },
{ id: 2, name: "dog", secondName: "hippo", bool: false },
{ id: 3, name: "cat", secondName: "tiger", bool: false },
],
};
handleChange = (animal) => {
console.log(animal);
const newArray = [...this.state.animals];
const filterIndex = this.state.animals.findIndex((a) => a.id === animal.id);
newArray[filterIndex] = {
...newArray[filterIndex],
bool: !newArray[filterIndex].bool,
};
this.setState({ animals: newArray });
};
render() {
return (
<div>
{this.state.animals.map((animal) => (
<Child
id={animal.id}
name={animal.name}
secondName={animal.secondName}
change={() => this.handleChange(animal)}
bool={this.state.bool}
/>
))}
</div>
);
}
}
export default Parent;
и ниже приведен дочерний компонент
import React, { Component } from "react";
class Child extends Component {
state = {
animal: this.props.name,
};
render() {
const { change, bool, secondName, name, id } = this.props;
return (
<>
<h1>animal number{id}</h1>
<p>{bool ? secondName : name}</p>
<button onClick={change}>이름바꾸기</button>
</>
);
}
}
export default Child;
я хотел переключить { bool : !это.состояние.bool } bool от true до false и примените это только к одному объекту, который был нажат.(onClick).
я пытался написать логику, чтобы установить состояние только одного ключа в одном объекте в массиве.
я не знаю, где я ошибся. может ли кто-нибудь заставить эту кнопку работать так, как она должна работать? исправьте мой код, пожалуйста
Комментарии:
1. вы пробовали пройти
bool={animal.bool}
вместоbool={this.state.bool}
этого ?
Ответ №1:
Передайте идентификатор в качестве параметра onClick
in Child.jsx.
<button onClick={() => change(id)}>이름바꾸기</button>
Затем используйте это id
, чтобы изменить состояние.
handleChange = (id) => {
const filterIndex = this.state.animals.map((animal) => animal.id === id ? ({...animal, name: 'racun or any other name', bool: !animal.bool}) : animal);
this.setState({ animals: newArray });
};
Надеюсь, это сработает. Спасибо, брат.
Комментарии:
1. я передаю параметры, чтобы щелкнуть по parent.js страница. уже сделал это, но не работает.. спасибо за попытку помочь тебе 🙂
Ответ №2:
import React, { Component } from "react";
import Child from "./Child";
class Parent extends Component {
state = {
animals: [
{ id: 1, name: "racoon", secondName: "allegator", bool: false },
{ id: 2, name: "dog", secondName: "hippo", bool: false },
{ id: 3, name: "cat", secondName: "tiger", bool: false },
],
};
handleChange = (id) => {
let updateBool = this.state.animals.map((animal) =>
animal.id === id ? { ...animal, bool: !animal.bool } : animal
);
this.setState({ animals: updateBool });
};
render() {
return (
<div>
{this.state.animals.map((animal) => (
<Child
id={animal.id}
name={animal.name}
secondName={animal.secondName}
change={this.handleChange}
bool={animal.bool}
/>
))}
</div>
);
}
}
export default Parent;
import React, { Component } from "react";
class Child extends Component {
render() {
const { change, bool, secondName, name, id } = this.props;
return (
<>
<h1>animal number{id}</h1>
<p>{bool ? secondName : name}</p>
<button onClick={() => change(id)}>이름바꾸기</button>
</>
);
}
}
export default Child;
Ответ №3:
Вы должны заменить bool={this.state.bool}
на bool={animal.bool}
.
Вы можете упростить эту handleChange
функцию, используя this.state.animals.map(...)
class Parent extends Component {
state = {
animals: [
{ id: 1, name: "racoon", secondName: "allegator", bool: false },
{ id: 2, name: "dog", secondName: "hippo", bool: false },
{ id: 3, name: "cat", secondName: "tiger", bool: false },
],
};
handleChange = id => {
const newAnimals = this.state.animals.map(animal => {
return (id === animal.id) ?
{...animal, bool: !animal.bool} :
animal;
});
this.setState({ animals: newAnimals });
};
render() {
return (
<div>
{this.state.animals.map(animal => (
<Child
id={animal.id}
name={animal.name}
secondName={animal.secondName}
change={this.handleChange}
bool={animal.bool}
/>
))}
</div>
);
}
}
class Child extends Component {
render() {
const { change, bool, secondName, name, id } = this.props;
return (
<>
<h1>animal number{id}</h1>
<p>{bool ? secondName : name}</p>
<button onClick={() => change(id)}>이름바꾸기</button>
</>
);
}
}