Question

Edit2 -演示代码正在运行

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

尽管我在过去几个月的响应工作中积累了一些经验，但对于我来说，关于输入的最佳实践（尤其是单选按钮，复选框和数字输入）始终不是百分百清楚的。

我目前（我认为是）创建一个简单的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且带有带有输入+跨度标签的div的表单，似乎太多了。不必担心classNames /样式以及元素结构。

但是，这篇文章实际上是要解决我正在尝试输入的数字，并且当前不起作用（不幸的是，在我的应用程序中，或者在此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和form容器，但是我当然需要它起作用。

在此先感谢您的帮助！

编辑-如果您有有关创建和样式单选按钮，复选框和数字输入的最佳反应最佳实践的最新，最佳指南，（和同时创建他们的处理函数），这比解决我的帖子还要好。谢谢

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>

Answer 2

尽管输入类型是数字，但在JavaScript中它将是字符串类型。因此，最好将其转换为Number类型：

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

此外，在输入字段中设置初始值：

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

必须进行初始渲染。

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

2 个答案: