Reactjs 更改状态中的值后的反应更新屏幕_Reactjs

Reactjs 更改状态中的值后的反应更新屏幕

reactjs

Reactjs 更改状态中的值后的反应更新屏幕,reactjs,Reactjs,我是一个新的反应者，我正在一个项目中工作，我被要求将表单重置为默认值我创建了一个函数，单击“重置”按钮后该函数将被调用 <input id="reset_button" type="button" name="reset" value="Reset" onClick={this.resetSearch}/> 我确实在控制台中看到ID更改值，但它不会在屏幕上更新我尝试过的其他事情 # when I do this the

我是一个新的反应者，我正在一个项目中工作，我被要求将表单重置为默认值

我创建了一个函数，单击“重置”按钮后该函数将被调用

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

我确实在控制台中看到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
   });
  }

我想我真正想做的是当我按下重置键呼叫时

SNFields.filterFields（'NAME\u和\u DOB'）

但是当我尝试这样做时，我在控制台中收到一条消息，内容是：未捕获类型错误：NSFields.filterFields不是一个函数

您的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
    }

import React，{Component}来自'React'；
导出默认类输入扩展组件{
显示名称：“输入”；
建造师（道具）{
超级（道具）；
此.state={
value:this.props.value，
禁用：this.props.disabled，
选中：this.props.checked，
className:this.props.className，
maxLength:this.props.maxLength，
占位符：this.props.placeholder，
id:this.props.id，
名称：this.props.name，
类型：this.props.name，
oldValue:this.props.value，
背景颜色：“”
};
this.handleBlur=this.handleBlur.bind（this）；
this.handleChange=this.handleChange.bind（this）；
};
组件将接收道具（下一步）{
if（this.state.value！==nextrops.value）{
this.setState（{value:nextrops.value}）；
};
if（this.state.disabled！==nextrops.disabled）{
this.setState（{disabled:nextrops.disabled}）；
};
如果（this.state.checked！==nextrops.checked）{
this.setState（{checked:nextrops.checked}）；
};
if（this.state.className！==nextrops.className）{
this.setState（{className:nextrops.className}）；
};
if（this.state.maxLength！==nextProps.maxLength）{
this.setState（{maxLength:nextProps.maxLength}）；
};
if（this.state.placeholder！==nextrops.placeholder）{
this.setState（{占位符：nextrops.placeholder}）；
};
};
componentDidMount（）{
this.setState（{value:this.props.value，
禁用：this.props.disabled，
选中：this.props.checked，
className:this.props.className，
maxLength:this.props.maxLength，
占位符：this.props.placeholder
});                                        
};
车把（活动）{
if（（this.props.checkError==null）| |（this.props.checkError（event，false）==true））{
this.setState（{value:event.target.value，
oldValue:event.target.value
})
}
其他的
{
this.setState（{value:this.state.oldValue}）
}
this.setState（{backgroundColor:'}）
};
手变（活动）{
if（this.state.value！==event.target.value）{
this.setState（{value:event.target.value}）
if（（this.props.checkError！==null）&&（this.props.checkError（事件，true）==false））{
this.setState（{backgroundColor:'red'}）
}
其他的
{
this.setState（{backgroundColor:'}）
}
}
if（this.props.onClick！==null）{
this.props.onClick（）；
}
};
render（）{
回来
}
};
Input.propTypes=
{
值：React.PropTypes.string，
占位符：React.PropTypes.string，
maxLength:React.PropTypes.number，
禁用：React.PropTypes.bool，
选中：React.PropTypes.bool，
类名：React.PropTypes.string，
id:React.PropTypes.string，
名称：React.PropTypes.string，
类型：React.PropTypes.string，
检查错误：React.PropTypes.func，
onClick:React.PropTypes.func
}
Input.defaultProps=
{
占位符：“”，
最大长度：100，
残疾人士:错,，
勾选：假，
值：“”，
类名：“”，
id:“”，
名称：“”，
类型：'text'，
checkError:null，
onClick:null
}

是否使用状态显示值？告诉我们你在哪里使用

this.state.ID

@Kinduser你在说什么？这是ES5，不是ES6…很抱歉我不能给我信息。我真的不知道还能展示什么你能给我们展示整个代码吗？顺便问一下，你正在用什么方法创建一个按钮？你的渲染方法是什么？谢谢，但我还是没有做到：（我非常感谢你的帮助，你的componentDidMount（）和componentWillReceiveProps（newProps）是什么样子的？

  #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>
    );
  }

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>
    );
  }

});

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
    }