更改狀態後更新屏幕後的反應更新屏幕

Question

我是新來的反應，我正在一個項目中，我被要求重置窗體的默認值。

我創建了一個獲取調用一個函數我點擊復位按鈕

<input id="reset_button" 
     type="button" 
     name="reset" 
     value="Reset" 
     onClick={this.resetSearch}/> 

後，這是我的函數：

resetSearch: function() { 
    this.setState({ID: 'Moo'}); 
}, 

我看到控制檯的ID變化值，但它不在屏幕上更新。

，我已經試過

# when I do this the element despairs from then screen 
    resetSearch: function() { 
    var values = this.fields.state.values; 
    this.setState({ 
     defaultValues: { 
     values 
     }, 
     ignoreDefault: false 
    }); 
    } 

---

#render function 
    render: function() { 
    return (
     <div className="card-body with-padding-bottom-0"> 
     <form id={this.formId}> 
      <div id="sn-fields" className="usa-grid-full sn-search"> 
      <SNFields ref={(fields) => { this.fields = fields; }} ddl_id='sn_search_card_type' snOptions={ this.getProp('snOptions')} fields={this.getProp('fields')} updateParentState={this.updateStateByField} defaultFieldValues={this.getProp('defaultValues')} ignoreDefault={this.state.ignoreDefault}></SNFields> 
      </div> 

      <div className="usa-grid-full with-margin-top-10 validation-div"> 
      <div id="sn_search_card_search_button_container" className="usa-width-one-whole"> 
       <label htmlFor="system_validator"></label> 
       <input hidden name="system_validator" id="system_validator"/> 
       <input id="search_button" type="button" name="search" value="Search" onClick={this.personSearch}/> 
       <input id="reset_button" type="button" name="reset" value="Reset" onClick={this.resetSearch}/> 
      </div> 
      </div> 
     </form> 
     </div> 
    ); 
    } 

---

其他的事情我能找到一類SNFields

var SNFields = React.createClass({ 

    filterFields: function(searchVal) { 
    console.log('PCQSFields - filterFields ') 
    var filterLabels = []; 

    //filter in this component since the filtering can't be done on the ruby side 
    switch(searchVal) { 
     case 'APPLICATION_ID': 
     case 'ENUMERATOR': 
     case 'ENCOUNTER_ID': { 
     filterLabels = ['ID']; 
     break; 
     } 
     case 'NAME_AND_DOB': { 
     filterLabels = ['Date of Birth', 'Last Name', 'Date Range', 'First Name']; 
     break; 
     } 
     default: { 
     break; 
     } 
    } 

    var fields = this.props.fields.slice(); 
    for (var i = fields.length - 1; i > -1; i--) { 
     if (filterLabels.indexOf(fields[i].label) < 0) { 
     fields.splice(i, 1); 
     } 
    } 

    return fields; 
    }, 

    render: function() { 
    console.log('NSFields - render ') 
    return (
     <div> 
     <div className="usa-width-one-third"> 
      <label htmlFor={this.props.ddl_id} className="card-label bold">Search Type</label> 
      <Dropdown id={this.props.ddl_id} onChange={this.updateFields} selectableArray={this.props.nsOptions} classes="" selectedOption={this.state.ddl}/> 
     </div> 
     <div className="flex-container" style={{'flexWrap': 'row'}}> 
      {this.nsFieldsHelper(this.state.fields)} 
     </div> 
     </div> 
    ); 
    } 

}); 

我想我真正想要做的是當我按下重置來撥打

SNFields.filterFields('NAME_AND_DOB') 但是當我嘗試，我在控制檯中看到一條消息，上面寫着：遺漏的類型錯誤：NSFields.filterFields不是一個函數

Answer 1

請問你componentDidMount（）和componentWillReceiveProps（newProps）的樣子？ 這是我如何完成輸入組件：

import React, { Component } from 'react'; 
    export default class Input extends Component { 
     displayName: 'Input'; 
     constructor(props) { 
      super(props); 
      this.state = { 
       value: this.props.value, 
       disabled: this.props.disabled, 
       checked: this.props.checked, 
       className:this.props.className, 
       maxLength:this.props.maxLength, 
       placeholder:this.props.placeholder, 
       id:this.props.id, 
       name:this.props.name, 
       type:this.props.name, 
       oldValue:this.props.value, 
       backgroundColor:'' 
      }; 
      this.handleBlur = this.handleBlur.bind(this); 
      this.handleChange = this.handleChange.bind(this); 
     }; 
     componentWillReceiveProps(nextProps) { 
      if (this.state.value !== nextProps.value) { 
       this.setState({ value: nextProps.value}); 
      }; 
      if (this.state.disabled !== nextProps.disabled) { 
       this.setState({ disabled: nextProps.disabled}); 
      }; 
      if (this.state.checked !== nextProps.checked) { 
       this.setState({ checked: nextProps.checked}); 
      }; 
      if (this.state.className !== nextProps.className) { 
       this.setState({ className: nextProps.className}); 
      }; 
      if (this.state.maxLength !== nextProps.maxLength) { 
       this.setState({ maxLength: nextProps.maxLength}); 
      }; 
      if (this.state.placeholder !== nextProps.placeholder) { 
       this.setState({ placeholder: nextProps.placeholder}); 
      }; 
     }; 
     componentDidMount() { 
      this.setState({ value: this.props.value, 
       disabled: this.props.disabled, 
       checked: this.props.checked, 
       className:this.props.className, 
       maxLength:this.props.maxLength, 
       placeholder:this.props.placeholder 
      });           
     }; 
     handleBlur(event) { 
      if ((this.props.checkError===null)||(this.props.checkError(event,false) === true)) { 
       this.setState({ value: event.target.value, 
        oldValue: event.target.value 
       }) 
      } 
      else 
      { 
       this.setState({ value: this.state.oldValue }) 
      } 
      this.setState({ backgroundColor: ''}) 
     }; 

     handleChange(event) { 
      if (this.state.value !== event.target.value) { 
       this.setState({ value: event.target.value }) 
       if ((this.props.checkError!==null)&&(this.props.checkError(event,true) === false)) { 
        this.setState({ backgroundColor: 'red'}) 
       } 
       else 
       { 
        this.setState({ backgroundColor: ''}) 
       } 
      } 
      if (this.props.onClick!==null) { 
       this.props.onClick(); 
      } 
     }; 
     render() { 
      return <input value={this.state.value} 
         maxLength={this.state.maxLength} 
         placeholder={this.state.placeholder} 
         className={this.state.className} 
         id={this.props.id} 
         name={this.props.name} 
         type={this.props.type} 
         disabled={this.state.disabled} 
         checked={this.state.checked} 
         onBlur={this.handleBlur} 
         onChange={this.handleChange} 
         style={{background:this.state.backgroundColor}}/> 
    } 
    }; 
    Input.propTypes= 
    { 
     value:React.PropTypes.string, 
     placeholder:React.PropTypes.string, 
     maxLength: React.PropTypes.number, 
     disabled:React.PropTypes.bool, 
     checked:React.PropTypes.bool, 
     className:React.PropTypes.string, 
     id:React.PropTypes.string, 
     name:React.PropTypes.string, 
     type:React.PropTypes.string, 
     checkError: React.PropTypes.func, 
     onClick: React.PropTypes.func 
    } 
    Input.defaultProps = 
    { 
     placeholder:'', 
     maxLength:100, 
     disabled:false, 
     checked:false, 
     value:'', 
     className:'', 
     id:'', 
     name:'', 
     type:'text', 
     checkError:null, 
     onClick:null 
    }