Обновить текст кнопки при нажатии, отображаемом с использованием метода карты в ReactJS
Я отображаю некоторые данные из массива объекта, который содержит кнопку. Я добавляю текст кнопки из состояния, которое изначально установлено как "Выбирать". Что я хочу, так это то, что когда я нажимаю любую кнопку, ее значение должно обновляться как "Выбрано». В настоящее время все значения кнопок обновляются, когда я нажимаю любую кнопку.
const TestPage = () =>{
let buttons = [
{name:'Select1', id:1},
{name:'Select2', id:2},
{name:'Select3', id:3}
]
const [btnText, setbtnText] = useState('Select')
const handleClick = () =>{
setbtnText('Selected')
}
return(
<div>
{!!buttons && buttons.map(item =>{
return(
<p key = {item.id}>
<Button btnType='button' btnText = {btnText} clickHandler = {handleClick} />
</p>
)
})}
</div>
)
}
export default TestPage;
Ответы 1
У каждой кнопки должно быть свое состояние. Когда вы делите одну переменную между несколькими кнопками, все изменится, если какой-либо обработчик изменит одну переменную.
const Example = () => {
const [buttons, setButtons] = React.useState([
{name: "Select", id: 1},
{name: "Select", id: 2},
{name: "Select", id: 3},
]);
const handleButtonClick = i => {
setButtons(prevState => {
const nextState = prevState.map(btn => ({
...btn, name: "Select"
}));
nextState[i].name = "Selected";
return nextState;
});
};
return (
<div>
{buttons.map(({name, id}, i) =>
<button
key = {id}
onClick = {() => handleButtonClick(i)}
>
{name}
</button>
)}
</div>
);
};
ReactDOM.render(<Example />, document.querySelector("#app"));<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id = "app"></div>Другой подход — передать id обработчику кликов и использовать const i = buttons.findIndex(btn => btn.id === id), чтобы определить, имя какой кнопки следует изменить.
Спасибо за помощь. Можете ли вы также сказать, что если я нажму на другую кнопку, то оставшийся текст кнопки должен отображать текст по умолчанию, т.е. «Выбрать». Только последняя нажатая кнопка должна отображать выбранный текст.
Обновление помогает? Трудно сказать, являются ли name: "Selected1" и т. д. настоящими именами или нет, и должны ли они быть восстановлены в "Select1", "Select2" и т. д., или просто сказать "Select". Я предположил последнее. Если это неверное предположение, может помочь показать более репрезентативный фрагмент вашей фактической структуры и немного более четко описать поведение.
Да. его последний. Имя по умолчанию будет таким же. И да, ваш обновленный ответ сработал для меня. В очередной раз благодарим за помощь.
Вы должны указать «id» для каждого элемента Button, чтобы идентифицировать их однозначно. Передайте этот идентификатор методу Handler. Используйте этот идентификатор для идентификации элемента, а затем обновите значение