フォームが空白入力をクリアしていますprev set data

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'> 
 
      \t <div className='card-name'>{name}</div> 
 
      \t <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

は、あなたは彼らが変更されたかどうかにかかわらず、フォームの値に基づいて、あなたの状態を更新している助けたりもない。

簡単な変更のために、あなただけの

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

はまた、この場合には、私は、フォームの状態に基づいて、このような編集を行ったがに応じて好む状態にあなたのinputタグのデフォルト値を設定することができますonChangeを処理するシナリオ。

たとえば、設定ページでは、特定のトグルをすぐに有効にすることができます。次に、onChangeを処理し、状態を直接更新する必要があります。