Save value I already selected in combobox

Asked

Viewed 39 times

-2

I would like to save with the data that is already selected but does not work, I have to put in yes and then go back to no

Method

handleChange(e) {
    let obj=Object.assign({},this.state.area)
    obj[e.target.name]=e.target.value
    this.setState({area: obj})
    console.log(obj)
}

<div className="icalcar">
    <select 
        className="combobox" 
        name="calcario" 
        value={this.state.area.calcario} 
        onChange={this.handleChange}>
        <option name="calcario" value="Não">Não</option>
        <option name="calcario" value="Sim">Sim</option>
    </select>
</div>
html react

  • if you have the complete component? and what are you trying to do? I don’t understand very well

  • It would not be because you are running logic in the method handleChange and must, obligatorily, that the value has changed to be executed? It seems to me to use the correct structure.

1 answer

0


To change the status of select at the time of the selection handleChange need to re-mount the corresponding key from the calcario, example:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      area: {
        calcario: "Sim"
      }
    }
    this.handleChange =
      this.handleChange.bind(this);
  }
  handleChange(e) {    
    const area = {area: { 
      ...this.state.area, 
      calcario: e.target.value 
    }};
    this.setState(area);
  }
  render() {
    return (
      <div>       
        <div style={{height:'25px'}}>
        {this.state.area.calcario}
        </div>
        <select 
          className="combobox" 
          name="calcario" 
          value={this.state.area.calcario} 
          onChange={this.handleChange}>
          <option value="Não">Não</option>
          <option value="Sim">Sim</option>
        </select>
      </div>
    )
  }
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Browser other questions tagged html react

You are not signed in. Login or sign up in order to post.