Как поставить дефолтное значение в input type="number"?

Есть 2 инпута с типом намбер, нужно поставить первоначальное значение каждому инпуту из пропсов, на пример this.props.min в первом инпуте, но проблема заключается в том, что когда я пытаюсь очистить значение инпута, автоматически становится значение из пропсов, а нужно что бы значение было проставлено только 1 раз при рендеринге, далее его можно было бы изменять/очищать.

PS. пропса по апишке из редакса

import React from 'react'

class MobileCountInput extends React.Component {
	constructor(props) {
		super(props)
		this.handleChangeMin = this.handleChangeMin.bind(this)
		this.handleChangeMax = this.handleChangeMax.bind(this)
	}

	state = {
		valueMin: '',
		valueMax: ''
	}

	handleChangeMin(e) {
		let value = parseFloat(e.target.value)
		this.setState({
			valueMin: value
		})
	}

	handleChangeMax(e) {
		let value = parseFloat(e.target.value)
		this.setState({
			valueMax: value
		})
	}

	render() {
		let valmin = this.state.valueMin
		
		return (
			<div>
                              <input
				type="number"
				value={valmin || this.props.min}
				onChange={(e) => this.handleChangeMin(e)}
                              />
				<input
				  type="number"
	  			  value={this.state.valueMax}
				  onChange={(e) => this.handleChangeMax(e)}
				/>
			</div>
		)
	}
}

export default MobileCountInput
  • Вопрос задан
  • 251 просмотр
Решения вопроса 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Вам просто нужно задать начальное состояние

state = {
    valueMin: this.props.min || '',
    valueMax: ''
  }

// в рендере убрать условие у первого инпута в value
<input
  type="number"
  value={valmin}
  onChange={(e) => this.handleChangeMin(e)}
/>


codesandbox
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы