javascript - 我的 react 输入类型 == 数字不起作用

Question

Edit2 - 演示代码现在可以运行了

Edit3 - 看来我设置 radio 组样式的方式破坏了功能...我隐藏了输入并改为显示跨度，这似乎是个问题。

虽然我在过去几个月的 React 工作中获得了一些经验，但我一直不是 100% 清楚输入方面的最佳实践，特别是包括单选按钮、复选框和数字输入。

我目前有(我认为是)一种创建简单的 2 按钮单选按钮组的糟糕方法:

const oneTwoFourOptions = ['2 Graphs', '4 Graphs'];
const oneTwoFourButtons =
    (<form>
        <div className='cbb-buttons cbb-buttons-clear' style={{ flexDirection: 'column' }}>
            {oneTwoFourOptions.map((d, i) => {
                return (
                    <label key={'onetwofour-' + i} style={{ margin: '0', height: '30px' }}>
                        <input
                            type={'radio'}
                            value={oneTwoFourOptions[i]}
                            disabled={loading}
                            checked={oneTwoFour === oneTwoFourOptions[i]}
                            onChange={this.handleOneTwoFourChange}
                        />
                        <span style={{ width: '100%' }}>{oneTwoFourOptions[i]}</span>
                    </label>
                );
            })}
        </div>
    </form>);

...这是一个带有 div 的表单，带有带有输入 + 跨度的标签，这看起来太多了。不要像元素结构那样担心类名/样式。

但是，这篇文章实际上是为了解决我正在尝试进行的数字输入，但目前无法正常工作(不幸的是，无论是在我的应用程序中，还是在这篇 stackoverflow 文章中)。我正在积极调试这篇文章，但请参阅下文以了解我尝试输入数字的总体概述。

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id='root'>
  Come On Work!
</div>

在我的应用中，点击数字输入没有任何反应。它始终显示零，这是初始应用程序。我不确定为什么更改功能不起作用，对此的任何帮助将不胜感激。特别是，我想避免为这个单一数字输入使用过多的 div 和表单容器，但我当然需要它工作。

在此先感谢您的帮助!!

编辑 - 如果您有关于创建和设置单选按钮、复选框和数字输入的 react 最佳实践的最佳、最新指南的来源，(以及还创建了它们的处理程序函数)，这比处理我的帖子还要好。谢谢

Answer 1

javascript 的伟大之处在于，如果您想增加或减少数字值，则无需使用 input。下面的示例结合使用了 React 的本地 state 和 button。单击按钮时，它的 onClick 处理程序将相应地更新 state。

第一个示例允许您单击按钮来增加值。

第二个示例允许您根据单击的 + 或 - 按钮增加或减少值。

就 CSS 样式而言，您可以找到很棒的资源 here和 here .

就 flex 样式而言，您可以找到很好的资源 here .

然而，在当今时代，大多数开发人员转向 UI 框架以进行快速开发:ant-design , react-bootstrap , semantic-ui , 和 material-ui仅举几例。

class App extends React.Component {
  constructor(props) { 
    super(props);
    
    this.state = { minutes: 0 };
    this.handleIncreaseMinute = this.handleIncreaseMinute.bind(this);
    this.handleDecreaseMinute = this.handleDecreaseMinute.bind(this);
  } 
   
  handleIncreaseMinute() {
    this.setState(state => ({ minutes: state.minutes + 1 }));
  }
  
  handleDecreaseMinute() {
    this.setState(state => ({ minutes: state.minutes > 0 ? state.minutes - 1 : 0 }));
  }


  render() {   
    return(
      <React.Fragment>
        <div className="container">
          <p className="label">Minutes:</p>
          <button className="minutes" onClick={this.handleIncreaseMinute}>{this.state.minutes}</button>
        </div>
        <div className="container">
          <p className="label">Minutes:</p>
          <button className="decreaseButton" onClick={this.handleDecreaseMinute}>-</button>
          <p className="minutesDisplay">{this.state.minutes}</p>
          <button className="increaseButton" onClick={this.handleIncreaseMinute}>+</button>
        </div>
      </React.Fragment>
    )
  }
}

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

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.label {
  font-weight: 700;
  margin-right: 10px;
}

.increaseButton, .decreaseButton {
  cursor: pointer;
  margin: 0 5px;
  text-align: center;
  font-size: 14px;
  width: 50px;
  padding: 4px;
  border-radius: 3px;
  border: 1px solid #333333;
  transition: all 0.2s ease-in-out;
}

.decreaseButton {
  background-color: #f56342;
  color: white;
}

.decreaseButton:hover {
  background-color: #be391c;
}

.increaseButton {
  background-color: #1c2022;
  color: white;
}

.increaseButton:hover {
  background-color: #5a5a5a;
}

.minutesDisplay {
  font-size: 14px;
  width: 100px;
  padding: 4px;
  border-radius: 3px;
  border: 1px solid #333333;
  text-align: center;
}

.minutes {
  cursor: pointer;
  font-size: 14px;
  width: 100px;
  padding: 4px;
  border-radius: 3px;
  border: 1px solid #333333;
  text-align: center;
  transition: all 0.2s ease-in-out;
}

.minutes:hover {
  background-color: #c1c1c1;
}

.minutes:focus, .increaseButton:focus, .decreaseButton:focus {
  outline: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id='root'>
</div>