Edit2-演示代码正在运行
Edit3-似乎我在设置收音机组的样式时破坏了功能...我隐藏了输入，而是显示一个跨度，这似乎是一个问题。
尽管在过去的几个月中我在响应方面的工作积累了一些经验，但对于我而言，关于输入的最佳实践（尤其是单选按钮，复选框和数字输入）始终不是百分百清楚的。
我目前（我认为是）创建一个简单的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 / styles以及元素结构。
但是，该帖子实际上是要解决我尝试输入的数字，并且当前不起作用（不幸的是，在我的应用程序中，或者在此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容器，但是我当然需要它起作用。
在此先感谢您的帮助！
编辑-如果您有关于React-Best-实践的最佳，最新指南的资源，该指南用于创建和样式单选按钮，复选框和数字输入（以及创建其处理函数），甚至比处理我的帖子更好。谢谢
最棒的javascript是，input如果要增加或减少编号的值，则无需使用。以下示例将React的localstate与buttons结合使用。单击按钮后，其onClick处理程序将相应更新state。
第一个示例允许您单击按钮来增加值。
第二个示例使您可以基于单击+或-按钮来增加或减少值。
就flex样式而言，您可以在此处找到大量资源。
但是，在当今时代，大多数开发人员都转向UI框架来进行快速开发：ant-design，react-bootstrap，语义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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句