Edit2 - теперь работает демонстрационный код
Edit3 - кажется, что способ, которым я создаю стиль радиогруппы, нарушает функциональность ... Iвместо этого скрывайте ввод и отображайте диапазон, и это кажется проблемой.
Хотя за последние несколько месяцев я приобрел некоторый опыт работы с реакцией, что-то, что мне всегда было не совсем понятно на 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 с меткой с input + span, которая кажется слишком большой.Не беспокойтесь о 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 и контейнеров форм для этого единственного числового ввода, но, конечно, мне нужно, чтобы оно работало.
Заранее благодарим за помощь в этом !!
Редактировать - если у вас есть источник самого лучшего, самого современного руководства по реагированию лучше всего-практики для создания и оформления радиокнопок, флажков и ввода чисел (а также создания их функций-обработчиков), что было бы даже лучше, чем рассмотрение моего поста.Спасибо