Общая функция в реакции с несколькими переменными состояния

Question

Как написать универсальную функцию с различным изменением переменной состояния на основе раскрывающегося списка.

для примера:

У меня есть раскрывающийся список 1 и раскрывающийся список 2. Если я изменяю

раскрывающийся список 1, мне нужно изменить несколько переменных состояния, таких как a, b, c

раскрывающийся список 2, мне нужно изменить несколько переменных состояния, таких как x, y, z

Я могусделать это с 2 функциями.Но как написать для этого универсальную функцию?

handleChange: function(e) {
    //api call to xyz.com/getcompany/<company id> to get the job list here
    this.setState({
      selectedCompany: e.target.value,
      companychange: "company changed. New value: " + e.target.value
    })
  },

  handleChange2: function (e) {
    // api call to xyz.com/jobstatus/<job id> to get the job status\(like how many position available for this job\) here
    this.setState({
      jobchange:"job changed. New value " + e.target.value
    })
  }

Codepen: https://codepen.io/asdhanapal/pen/WmwJPj?editors=0011

Answer 1

Когда я читаю ваше описание требований, между раскрывающимся списком 1 и раскрывающимся списком 2 нет функциональных зависимостей, поэтому я бы разделил их на два отдельных компонента.

Answer 2

Попробуйте это:

handleChange: function(source, e) {
switch(source) {
  case 'company': 
      //Need to do api call to get the job list here
      this.setState({
        selectedCompany: e.target.value,
        companychange: "company changed. New value: " + e.target.value
      })
    break;
  case 'job':
      // Need to do api call to get the job status\(like how many position available for this job\) here
      this.setState({
        jobchange:"job changed. New value " + e.target.value
      })
    break;

  };
},

 <select value={this.state.selectedCompany} onChange={this.handleChange.bind(this, 'company')}>
 <select value={this.state.selectedCompany} onChange={this.handleChange.bind(this, 'job')}>

Answer 3

Вы можете использовать следующее:

handleChange = event => {
  const { name, value } = event.target;
  this.setState({
    [name]:value
   })
}
// in input 
<input name="username" onChange={this.handleChange} />

Answer 4

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

 changeToState(fn) {
    return e => this.setState(fn(e));
 }

 render() {
   //...
   <input onChange={changeToState(e => ({ selectedCompany: e.target.value, /*...*/ }))} />
   <input onChange={changeToState(e => ({ jobChange: e.target.value, /*...*/ }))} />
}

Если это слишком много, вы можете извлечь событие handleChange в функциональный компонент:

 const StateChanger = ({ action, parent, ...props }) => (
   <input onChange={e => parent.setState(action(e))} {...props} />
 );

  // inside a component's render:
   <StateChanger parent={this} action={e => ({ selectedCompany: e.target.value })} style={{ color: red }} />

но, как я уже упоминал в комментариях, это может немного удалить повторяющийся код, но это не улучшит удобочитаемость / удобство обслуживания.

Answer 5

Вы можете использовать ниже фрагмент:

handleChange = event => {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    };

Ссылка на раздел реагирующих документов: https://reactjs.org/docs/forms.html#handling-multiple-inputs