Eingabe-Taste verliert den Fokus auf die Eingabe und zeigt keinen Eingabewert in der Antwort

Question

Dies ist meine Datei, die das Eingabefeld enthält.

class IndividualPsid extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     editData: false, 
     newSkuid: this.props.SkuId 
    } 
    this.updateState = this.updateState.bind(this); 
} 

componentWillReceiveProps(nextProps) { 
    this.setState({ editData: nextProps.editingProp }); 
    this.render(); 
} 

updateState(e) { 
    const psid = e.target.value; 
    this.setState({ newSkuid: psid },() => { 
     this.props.onPsidChange(this.props.id, this.state.newSkuid); 
    }); 
} 

render() { 
    let member = ''; 
    if (this.props.editingProp) { 
     member = (
      <div> 
       <input type="text" id="skuids" value={this.state.newSkuid} key={'dkj' + uuidv4()} onChange={this.updateState} 
        className="skuid col-xs-7" /> 
      </div> 
     ) 
    } 
    else { 
     member = (
      <div key={this.props.SkuId} id="skuids" className="skuid col-xs-7" >{this.props.SkuId}</div> 
     ) 
    } 
    return (
     <div className="row" > 
      <div className="skuname col-xs-5">{this.props.SkuName}</div> 
      {member} 
     </div>); 
} 

Dies ist meine Datei, die Requisiten an die obige Datei übergibt.

class Category extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     editing: false, 
     text: 'EDIT', 
     changedSkus: [] 
    } 
    this.edit = this.edit.bind(this); 
    this.onPsidChange = this.onPsidChange.bind(this); 
} 

onPsidChange(id, psid) { 
    const changedSkus = this.state.changedSkus.filter(
     (sku) => (sku.brandProductExternalSkuId != psid) 
    ); 
    changedSkus.push({ 
     brandProductExternalSkuId: psid, 
     brandProductSkuId: id 
    }); 
    this.setState({ 
     changedSkus: changedSkus 
    }) 
} 

edit(skuList) { 
    if (this.state.editing == false) { 
     this.setState({ 
      text: 'SAVE', 
      editing: true 
     }); 
    } 
    else { 
     this.setState({ 
      text: 'EDIT', 
      editing: false 
     }); 
     this.props.edit_menu_items_api(this.state.changedSkus); 
    } 
    this.render(); 
} 

render() { 

    return (
     <div className="show-grid row category-row"> 
      <div className="col-md-8 text-left category"> 
       <b>{this.props.categoryData.categoryName}</b> 
      </div> 
      {this.props.categoryData.productList.length > 0 && 
       <div className="col-md-4 text-right"> 
        <button className={this.state.text == "EDIT" ? "edit" : "save"} onClick={() => 
         this.edit(this.props.categoryData.productList[0].brandProductSkuList)}> 
         {this.state.text}</button> 
       </div> 
      } 
     </div> 
    ) 
} 

Also, was passiert ist, wenn ich auf EDIT-Taste klicken Sie das Feld editable.And wird, wenn ich etwas in das Eingabefeld eingeben, ist es nicht die eingegebene Nummer nicht zeigen, sondern zeigt an, wenn ich auf Speichern. Auch verliert es den Fokus nach jeder eingegebenen Zahl.Wie soll ich das lösen? Die Editierfunktion ist in der Kategorie-Komponente definiert, die die Redux-Funktion onclick speichert.

Answer 1

Also meine Eingabe-Komponente wurde neu gerendert, aufgrund der es nicht richtig funktioniert.Nur Weg, um dies zu lösen, war es außerhalb der render.So schrieb ich verwendet ComponentWillMount für das. Hier ist mein neuer Code dafür.

class IndividualPsid extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     editData: false, 
     newSkuid: this.props.SkuId 
    } 
    this.updateState = this.updateState.bind(this); 
    this.member = null; 
} 
updateState(e) { 
    const psid = e.target.value; 
    this.setState({ newSkuid: psid }); 
} 
componentWillMount() { 
    this.member = <div key={this.props.SkuId + uuidv4()} className="skuid col-xs-7" >{this.props.SkuId}</div> 
} 

componentWillReceiveProps(nextProps) { 
    if (this.props.editingProp !== nextProps.editingProp && nextProps.editingProp) { 
     this.member = <div> 
      <input defaultValue={this.state.newSkuid} key={this.props.SkuId + uuidv4()} onChange={this.updateState} 
       onBlur={() => { this.props.onPsidChange(this.props.id, this.state.newSkuid) }} className="skuid col-xs-7" /> 
     </div> 
    } else if (this.props.editingProp !== nextProps.editingProp && !nextProps.editingProp) { 
     this.member = <div key={this.props.SkuId + uuidv4()} className="skuid col-xs-7" >{this.props.SkuId}</div> 
    } 
    this.setState({ editData: nextProps.editingProp }); 

} 
    render() { 
    return (
     <div className="row" > 
      <div className="skuname col-xs-5">{this.props.SkuName}</div> 
      {this.member} 
     </div>); 
} 
    } 

Ich benutzte das onBlur Ereignis in das Eingabefeld ein, so dass das Eingabefeld Fokus nicht verlieren, bis der Benutzer die Eingabe ist.