#StackBounty: #javascript #reactjs #button #input My react input type == number is not working

Bounty: 50

Edit2 – demo code is now working

Edit3 – it appears that the way I’m styling the radio group is breaking the functionality… I hide the input and display a span instead, and that appears to be a problem.

Although I’ve gained some experience over last several months working in react, something that’s always been not 100% clear to me is best-practices with regards to inputs, specifically including radio buttons, checkboxes, and number inputs.

I currently have (what i think is) a bad approach to creating a simple 2-button radio-button-group:

const oneTwoFourOptions = ['2 Graphs', '4 Graphs'];
const oneTwoFourButtons =
    (<form>
        
{oneTwoFourOptions.map((d, i) => { return ( ); })}
</form>);

…which is a form with a div with a label with an input + span, which seems like too much. Dont worry about the classNames / styles so much as the element structure.

However, this post is actually to address a number input that I am trying to make, and that is not currently working (either in my app, or in this stackoverflow post unfortunately). I am actively debugging this post, but see below for a general overview of my attempt at a number input.

class App extends React.Component {
  constructor(props) { 
    super(props);
    
    this.state = {
      minMinutes: 0
    }
  } 

  handleMinMinutesChange = (event) => {
    this.setState({ minMinutes: event.target.value });
  }

  render() {
  
    let minMinutesInput =
      (<label className='cbb-number-input'>
          <input
              type='number'
              name='min-minutes-input'
              value={this.state.minMinutes}
              onChange={this.handleMinMinutesChange}
          />
          <span>{this.state.minMinutes}</span>
      </label>);
    
    return(
      <React.Fragment>
        {minMinutesInput}
      </React.Fragment>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
label.cbb-number-input {
  display: flex;
  line-height: 0;
  margin: 2px;
  font-weight: 700;
}


input[type=number] {
  width: 0; 
  height: 0;
  visibility: hidden;
  overflow: hidden;
}

span {
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;

  line-height: 1;
  font-size: 14px;
  width: 100px;
  padding: 4px;
  border-radius: 3px;
  border: 1px solid #333333;

  text-align: center;
}
https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js


Come On Work!

In my app, clicking on the number input does nothing. It always shows zero, which is the initial app. I’m not sure why the change functionality is not working, and any help with this would be greatly appreciated. In particular, I would like to avoid using an excessive number of divs and form containers for this single number input, but ofcourse i need it working.

Thanks in advance for help with this!!

Edit – if you have a source to the very best, most up-to-date guide on react-best-practices for creating and styling radio buttons, checkboxes, and number inputs, (and also creating their handler functions), that would be even better than addressing my post. Thanks


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.