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

Question

[Владимир Власюк]

Есть 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

Comments

[Владимир Власюк]

помог Максим,
далее доработал компонент в котором появляются эти инпуты, что бы они появлялись только уже с загруженными данными от апишки,

{this.props.areaMinMaximum && (
	<MobileCountInput
		min={this.props.areaMinMaximum}
		max={this.props.areaMaxMaximum}
		getResult={this.getArea}
	/>
)}

Answer 1

[Максим]

Вам просто нужно задать начальное состояние

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

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

codesandbox