如何在反应中重置不是表单字段的输入字段答案

【问题标题】：How to reset input fields which are not form fields in react如何在反应中重置不是表单字段的输入字段
【发布时间】：2020-08-17 03:07:02
【问题描述】：

我正在做这个项目，用户提供一个数字/日期和月份/年份作为输入值，因此它返回一些有关 API (www.numbersapi.com) 帮助的输入信息。

代码由定义状态的组件组成，其值作为 props 发送以重新渲染组件。

每当“categoryValue”更改时，“NumbersFactsInput”就会重新渲染。

每当点击提交按钮时，它都会借助 API 获取数据。

我希望每次“categoryValue”更改或按下提交按钮后都重置输入字段。

这些是状态变量...

class NumberFacts extends Component {

    constructor() {
        super();
        this.state = {
            categoryValue : 'trivia',
            number : ' ',
            date : ' ',
            year : ' ',
            displayText : 'Result will appear here!'
        }
    }

onChangeCategory = (event) => {
 this.setState({categoryValue : event.target.value}) ;
}

这是我的 submitButton 函数...

 onButtonClick = (event) => {

        switch(this.state.categoryValue) {
            case 'trivia' : this.fetchData(this.state.number);
                                break;

            case 'math' : this.fetchData(this.state.number);
                                break;

            case 'date' : this.fetchData(this.state.date);
                                break;

            case 'year' : this.fetchData(this.state.year);
                                break;  

            default : console.log('default case');
        }
 }

我的渲染函数，我从那里向其他组件发送道具...

render() {
        return(
        <div className='tc bg-light-blue dib br3 pa3 ma3 bw2 shadow-5'>
        <h1>Number Facts</h1>
        <NuberFactsCategories  changeCategory = {this.onChangeCategory} />
        <NumberFactsInputs category={this.state.categoryValue} inputChange={this.onInputChange} />
        <DisplayText text={this.state.displayText}/>
        <SubmitButton buttonClick={this.onButtonClick} />
        </div>
        );
        }

这是我的输入字段组件...

const NumberFactsInputs = ({ category, inputChange }) => {

    if(category === 'trivia' || category === 'math') {
    return(
            <div>
            <ul onChange={inputChange}>
              <li> <input  className='br3 dib pa1 ma2 bg-lightest-blue bn' type='number' placeholder='Number' /></li>
              <li> <input readOnly className='br3 dib pa1 ma2 bg-lightest-blue bn' type='number' placeholder='MM/DD' style={{opacity: 0.4}}/></li>
              <li> <input readOnly className='br3 dib pa1 ma2 bg-lightest-blue bn' type='number' placeholder='YYYY' style={{opacity: 0.4}}/></li>
            </ul>
            </div>
        );
   }

    else if(category === 'date') {
     return(
            <div>
            <ul  onChange={inputChange}>
              <li> <input readOnly className='br3 dib pa1 ma2 bg-lightest-blue bn' type='number' placeholder='Number' style={{opacity: 0.4}}/></li>
              <li> <input className='br3 dib pa1 ma2 bg-lightest-blue bn' type='text' placeholder='MM/DD' /></li>
              <li> <input readOnly className='br3 dib pa1 ma2 bg-lightest-blue bn' type='number' placeholder='YYYY' style={{opacity: 0.4}}/></li>
            </ul>
            </div>
        );
    }

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

您所描述的模式称为controlled components。

为了改变父组件的状态，你需要传递一个setter函数给子组件——这样它就可以修改父组件的状态，后面跟着它自己的值：

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fieldValue: 'initial value',
    };
  }

  setFieldValue(newValue) {
    this.setState({
      fieldValue: newValue,
    });
  }

  render() {
    return (
      <ControlledChild
        value={this.state.fieldValue}
        onChange={this.setFieldValue.bind(this)}
      />
    );
  }
}

class ControlledChild extends Component {
  handleChange(e) {
    this.props.onChange(e.target.value);
  }
  
  render() {
    return (
      <input
        value={this.props.value}
        onChange={this.handleChange.bind(this)}
      />
    );
  }
}

【讨论】：