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') 但是当我尝试在控制台中收到一条消息：未捕获TypeError：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
    }

在更改状态中的值后响应更新屏幕

1 个答案: