如何从 select 中获取两个不同的值？

Question

I need to split a string and store the pieces in different var.

I have an array called referti

[ {referti.hash_referto}, {referti.data_esame}, {referti.tipo_esame}] 

for a list of elements. I display those elements in a select by mapping like this

render() {
    const refertiItems = this.state.referti.map((referti, i) => {
        return (
            <option key={referti.hash_referto}>
              {referti.tipo_esame}-{referti.data_esame} {referti.hash_referto}
            </option>
        )
    });

    return(
        <Label for="type" text="Seleziona un referto" />
        <select
            name="codiceReferto"
            placeholder="Selezionare Referto"
            onKeyPress={this.onEnter}
            value={this.codiceReferto}
            onChange={this.handleInputChange}
        >
            <option default value="vuoto" />
            {refertiItems}
        </select>
    );
}

then when the user choose one element of the select I save the value in nameArray[ ] initialized in the state.

handleInputChange() {
    console.log("valore", this.codiceReferto)
    const target = event.target;
    const nameArray = this.state


    const value =
      target.type === 'checkbox'
        ? target.checked
        : target.value;
    const name = target.name;

    if (name === "codiceReferto") {
      const newArray = value.split(" ")
      this.setState({ nameArray: newArray})
    }
}

so now the nameArray is: [0]: tipo_esame and data_esame [1]: hash_referto

How can i store nameArray[0] in descrizioneReferto initialized in the state and nameArray[1] in codiceReferto initialized in the state?

Answer 1

I think you have 2 options here.

1. You can directly set values fom newArray ,

if (name === "codiceReferto") {
   const newArray = value.split(" ")
   this.setState({ 
      nameArray: newArray,
      descrizioneReferto: newArray[0],
      codiceReferto: newArray[1] 
   })
}

2. You can use callback in setState to get and store value's from nameArray

if (name === "codiceReferto") {
   const newArray = value.split(" ")
   this.setState({ 
      nameArray: newArray,  
   }, () => this.setState({
      //here you can access `nameArray`
      descrizioneReferto: this.state.nameArray[0],  
      codiceReferto: this.state.nameArray[1] 
   }))
}

Answer 2

In you question I don't understand what do you want to do. But I created a working example. In comments, please provide more info.

Code:

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      referti: [
        {
          tipo_esame: 1,
          data_esame: "referto",
          hash_referto: "aaa"
        },
        {
          tipo_esame: 2,
          data_esame: "referto",
          hash_referto: "bbb"
        },
        {
          tipo_esame: 3,
          data_esame: "referto",
          hash_referto: "ccc"
        },
        {
          tipo_esame: 4,
          data_esame: "referto",
          hash_referto: "ddd"
        }
      ],
      nameArray: ["Andrei", "Fiodorov", "Mike", "Rug"],
      descrizioneReferto: null,
      codiceReferto: null
    };
  }

  handleChange = select => {
    console.log(select.target.value);
    const { nameArray } = this.state;
    this.setState({
      descrizioneReferto: nameArray[0],
      codiceReferto: nameArray[1]
    });
  };

  render() {
    const { referti } = this.state;

    return (
      <div className="App">
        <h1>Help me!</h1>
        <select onChange={el => this.handleChange(el)}>
          {referti.map((item, index) => {
            return (
              <option value={index}>
                {item.tipo_esame}-{item.data_esame} {item.hash_referto}
              </option>
            );
          })}
        </select>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Codesandbox example: