Как создать кнопку редактирования в React?

Question

Я довольно новичок в React, поэтому любая помощь будет принята!

Я пытаюсь создать кнопку редактирования для моего кода, которая позволяет пользователю редактировать год рождения человека и его дом.Мир.Я хочу, чтобы текст отображался в виде текстового поля при нажатии кнопки редактирования, чтобы пользователь мог изменить его, а затем как-то сохранить.Вот мой код:

class Card extends Component {

    render() {
      const {imgSrc, cardName, birthYear, onEdit} = this.props;
      return (
        <div className='card'>
          <div className='card-content'>
            <div className='card-name'>{cardName}</div>
                <img src={`http://localhost:3008/${imgSrc}`} alt='profile'/>
              <p>
                  <span>Birthday:</span>
                  <span className='birth-year'>{birthYear}</span>
              </p>
              <p>

                  <span>Homeworld:</span>
                  <span className='home-world'>Earth</span>
                  </p>
                <div align='center'>
                <button>Edit</button>
              </div>
            </div>
         </div>

Answer 1

Вы можете иметь внутреннее состояние editing, в соответствии с которым компонент отображает либо поле ввода со значением по умолчанию в качестве текущего значения для этого поля, либо <span>.Он переходит в истину, когда вы нажимаете кнопку редактирования.Вам также нужно будет условно отобразить кнопку обновления / сохранения и обновить значения при нажатии кнопки «Сохранить».Это общая идея.

class Card extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editing: false
    };
    this.newbirthYear = "";
    this.newHomeWorld = "";
  }

  render() {
    const { imgSrc, cardName, birthYear, homeWorld, onEdit } = this.props;
    return (
      <div className="card">
        <div className="card-content">
          <div className="card-name">{cardName}</div>
          <img src={`http://localhost:3008/${imgSrc}`} alt="profile" />
          <p>
            <span>Birthday:</span>
            {this.state.editing ? (
              <span className="birth-year">{birthYear}</span>
            ) : (
              <input
                type="text"
                defaultValue={birthYear}
                ref={node => {
                  this.newbirthYear = node;
                }}
              />
            )}
          </p>
          <p>
            <span>Homeworld:</span>
            {this.state.editing ? (
              <span className="home-world">{homeWorld}</span>
            ) : (
              <input
                type="text"
                defaultValue={homeWorld}
                ref={node => {
                  this.newHomeWorld = node;
                }}
              />
            )}
          </p>
          <div align="center">
            <button
              onClick={() => {
                this.setState({ editing: true });
              }}
            >
              Edit
            </button>
          </div>
        </div>
      </div>
    );
  }
}

Надеюсь, это поможет!

Answer 2

Вы должны установить setState на основе входящих реквизитов.Тогда в вашей форме вам нужно будет сделать что-то вроде

<input type='text' defaultValue={this.state.user.birthday} />