Как сбросить поля ввода, которые не являются полями формы в реакции

Question

Я работаю над проектом, где пользователь вводит число / dateAndMonth / year в качестве входного значения и соответственно возвращает некоторую информацию о входе, которую помогает API (www.numbersapi.com).

код состоит из компонентов, для которых определено состояние, а его значения отправляются в качестве подпорок для повторной визуализации компонентов.

Всякий раз, когда «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>
        );
    }

Answer 1

Шаблон, который вы описываете, называется контролируемыми компонентами .

Чтобы изменить состояние родительского компонента, вам нужно передать функцию установки в дочерний компонент - так он может изменить состояние родителя, после чего следует собственное значение:

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