Реакция ввода: добавление значения в случае пустого ввода

Question

В этом примере этот вход появляется, если состояние другого компонента установлено в true. Значение входных данных берется из счета4 состояния этого компонента: "", который передается как реквизит newScore4. Однако, если входные данные не отображаются и на них ничего не написано, значение не устанавливается как целое число, и когда я добавляю все результаты, я получаю результат NaN. Есть ли способ установить значение 0, если вход пуст?

<input id="score4" type="number" min="0" max="10" name="score4" style={this.props.addJudges ? none : display} value={this.props.newScore4} onChange={this.props.handleInputChange} />

handleInputChange = (e) => {
        this.setState({...this.state,
        [e.target.name]: e.target.value})
      };

Answer 1

Вы можете использовать троичный оператор для этого. Проверьте, является ли this.props.newScore4 пустым, если ему присвоено значение 0, если оно не пустое, просто назначьте this.props.newScore4

<input id="score4" type="number" min="0" max="10" name="score4" style={this.props.addJudges ? none : display} value={this.props.newScore4===''?0:this.props.newScore4} onChange={this.props.handleInputChange} />