Как заменить компонент другим по событию (нажатие кнопки) в реакции JS

Question

У меня длинный список отображения данных, разделенный на блоки с кнопкой редактирования на стороне каждого блока, например:

При каждом нажатии кнопки редактирования, янеобходимо заменить компонент отображения компонентом редактирования, заменив текст такой формой, как этот

, что будет лучшим способом сделать это.Я попытался поместить компоненты в состояние в виде списка и заменить компонент Display компонентом формы, когда нажата кнопка «Изменить», вместо того чтобы возвращать ее из render ():

return(
 <Display />
 );

Теперь я возвращаю:

return(
 {this.state.components[0]}
  );

и когда нажимают кнопку, делая это

this.setState({components:[<EditForm />]})

Это работает, но мне было интересно, хранит ли Component и JSX внутри хорошую идею / профессиональную практику?

Answer 1

вы можете сделать что-то вроде этого: use a variable in state for knowing edit is clicked or not

state={
   isEdit:false,
  }

on click of edit: this.setState({isEdit:true})

in render() use conditional rendering:

render(){
   return(
    <div>
        {(!this.state.isEdit) ? </ Display> : </ EditForm>}
     </div>
       )
     }

Answer 2

Я бы держал в состоянии только логическое значение для отображения формы редактирования или отображения и переключал бы это при нажатии кнопки.

Тогда в вашем методе рендеринга просто простое выражение if, чтобы выбрать, что отображать, например

render() {
    if (this.state.edit) return <EditForm />
    return <Display />
}

Answer 3

Лучше использовать условные операторы для отображения скрытых компонентов в соответствии с вашими требованиями.

Пример: 1) Поддерживать режим (т. Е.) Состояние компонента, чтобы отображать скрытые поля ввода. 2) При нажатии кнопки изменитестатус к истинному или ложному 3) Тогда это автоматически покажет / скроет

Счастливое кодирование!