如何在 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

您将必须根据传入的道具设置状态。然后在你的表格中你需要做一些像

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

Answer 2

您可以有一个内部 editing 状态，组件根据该状态呈现具有默认值的输入字段作为该字段的当前值或 <span>。当您按下编辑按钮时，它会翻转为真。您还必须有条件地呈现 update/save 按钮并在单击保存时更新值。这是大意。

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>
    );
  }
}

希望对您有所帮助！

如何在 React 中创建编辑按钮？

How to create an edit button in React?

edit

button

reactjs