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容器,但是我当然需要它起作用。
在此先感谢您的帮助!
编辑-如果您有有关创建和样式单选按钮,复选框和数字输入的最佳反应最佳实践的最新,最佳指南,(和同时创建他们的处理函数),这比解决我的帖子还要好。谢谢
答案 0 :(得分:2)
javascript
的优点在于,如果要增加或减少编号的值,则无需使用input
。以下示例将React的本地state
与button
结合使用。单击按钮后,它的onClick
处理程序将相应地更新state
。
第一个示例允许您单击按钮以增加值。
第二个示例允许您基于单击的+
或-
按钮来增加或减少值。
就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>
答案 1 :(得分:1)
尽管输入类型是数字,但在JavaScript中它将是字符串类型。因此,最好将其转换为Number类型:
this.setState({ minMinutes: +event.target.value });
此外,在输入字段中设置初始值:
value={this.state.minMinutes || 0}
必须进行初始渲染。