React Select 在 onChange 的参数中传递多个选项

Question

I am using React Select in my project and i have come across a situation where i need to loop through an array and show Select option in each loop.

          {Array.apply(null, { length: 3 }).map((item, index) => (
             
              <div className="wrapper-person-2">
                <p className="tab-text">Profissão</p>
                <Select
                  value={calcFormikValuesSelect()}
                  name={`relation[${index}]`}
                  onChange={handleChange}
                  options={options}
                  className="select-smoker"
                />
    
              </div>

          ))}

now for onChange i was using function which is mentioned in the docs

 const handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };

but the issue is i need to pass my "index" value to onChange function too for my work, so i looked onto passing multiple parameters on onChange but sadly found nothing useful :(

Hope someone helps me out, thanks !

Answer 1

To pass multiple parameters to handleChange just call it in this way:

      {Array.apply(null, { length: 3 }).map((item, index) => (
         
          <div className="wrapper-person-2">
            <p className="tab-text">Profissão</p>
            <Select
              value={calcFormikValuesSelect()}
              name={`relation[${index}]`}
              onChange={(selectedOption) => handleChange(selectedOption, index)}
              options={options}
              className="select-smoker"
            />

          </div>

      ))}

Then:

const handleChange = (selectedOption, index) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
    console.log(`Index selected:`, index);
  };