javascript - 表单正在清除空白输入上一组数据

Question

我似乎无法弄清楚为什么我的表单在提交时会清除以前的数据。我有一个编辑按钮，单击该按钮会弹出一个表单。如果我编辑姓名字段但不编辑出生日期字段，则姓名会更改且出生日期会空白。这可能是一个简单的愚蠢错误，但第二双眼睛可能会有所帮助

class Card extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataEditingMode: false,
      planetSelection: this.props.homeWorld,
    }
  }

  onEditDeets() {
    this.setState({
      dataEditingMode: !this.state.dataEditingMode
    });
  }

  onSaveDeets(element) {
    element.preventDefault();

    this.props.onSavingEditedDeets(
      this.props.id,
      this.refs.personName.value,
      this.refs.personBirthday.value,
      this.refs.personHomeWorld.value)

    this.setState({
      dataEditingMode: false
    });
  }

  onEditPlanetSelection(event) {
    this.setState({
      planetSelection:event.target.value
    });
  }

  render() {

    let getHomeWorld = (planetID) => {
      for (var i = 0; i < this.props.planetList.length; i++) {
        if (this.props.planetList[i].id === planetID) {
          return this.props.planetList[i].name;
        }
      }
      return 'planet does not exist.'
    }

    let name = this.props.name;
    let imageURL = this.props.imageURL;
    let birthday = this.props.birthday;
    let homeWorld = this.props.homeWorld;
    
    let dataEditingForm;

    if (this.state.dataEditingMode === true) {
      
      dataEditingForm = <form
      onSubmit={this.onSaveDeets.bind(this)}>

        <span>Name: </span>
        <input type="text" ref="personName" />
        <span>Birthday: </span>
        <input type="text" ref="personBirthday" />
        <span>Homeworld: </span>
        <select 
          value={this.state.planetSelection}
          ref="personHomeWorld"
          onChange={this.onEditPlanetSelection.bind(this)}
        >
            {this.props.planetList.map((planet)=>{
              return <option 
                          key={planet.id} 
                          value={planet.id}
                      >
                        {planet.name}
                      </option>
            })}
        </select>
        <button>Save Deets</button>
      </form>
    } else {
        dataEditingForm = <div></div>
    }

    return (
      <div className='card'>
        <div className='card-content'>
          	<div className='card-name'>{name}</div>
          	<img src={imageURL} alt='profile'/>
            <p>
                <span>Birthday:</span>
                <span>{birthday}</span>
            </p>
            <p>
                <span>Homeworld:</span>
                <span>{getHomeWorld(homeWorld)}</span>
            </p>
            <p>
                <span>
                  <button type="button" onClick={this.onEditDeets.bind(this)}>Edit Card Deets</button>
                </span>
            </p>

            {dataEditingForm}

        </div>
    </div>

    );
  }
}

export default Card;

Answer 1

基本上，您正在根据表单的值更新您的状态，无论它们是否更改。

对于一个简单的更改，您只需将 input 标记的默认值设置为状态

<span>Name: </span>
<input type="text" ref="personName" defaultValue="{name}" />
<span>Birthday: </span>
<input type="text" ref="personBirthday" defaultValue="{birthday}"/>

此外，在这种情况下，我更喜欢根据表单状态执行这样的编辑，但取决于您想要处理 onChange 的场景。

例如，在设置页面中，您可能希望某些切换立即生效。然后你应该处理 onChange 并直接更新状态。