我的反应输入类型 == 数字不起作用

Question

Edit2 - 演示代码正在运行

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

虽然我在过去几个月的 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-best-practices 的最佳、最新指南的来源，（以及还创建他们的处理函数），这甚至比解决我的帖子更好。谢谢

Answer 1

javascript 的优点在于，如果您想增加或减少编号值，则无需使用 input。下面的例子使用了 React 的本地 state 和 buttons。当一个按钮被点击时，它的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>

Answer 2

虽然输入类型是数字，但它在 JavaScript 中将是一种字符串类型。所以，最好转换成 Number 类型：

this.setState({ minMinutes: +event.target.value });

另外，在您的输入字段中设置初始值：

value={this.state.minMinutes || 0}

初始渲染是必需的。