Умножение числа на 10 путем автоматического вычисления в State - React JS

Question

В этом примере я хочу, чтобы пользователь увеличивал или уменьшал числа в поле ввода, а число, умноженное на 10, должно отображаться в диапазоне, смежном с полем ввода. Я не могу получить результат. Кто-нибудь может мне помочь.

Отрывок:

class App extends React.Component {
  state = {
    initialValue: 0,
    finalValue: initialValue* 10
  }
  render() {

    return (
    <div>
        <input type="number" value={this.state.initialValue} onChange={this.alpha} name="initialValue" id="initialValue"/>
        <span>{this.state.finalValue}</span>
    </div>
   )
  }
   alpha = (ev) => {
    this.setState({
            [ev.target.name]: ev.target.value
    });
   }

}
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

Answer 1

<span>{this.state.initialValue * 10}</span> - самое простое решение.
Прямо сейчас вы умножаете 10 в конструкторе. Этот код выполняется только один раз, поэтому finalValue не обновляется при изменении ввода. Если по какой-либо причине вам нужны две переменные как для начального, так и для конечного значения, вы можете использовать метод componentDidUpdate для обновления окончательного значения при изменении начального значения, как показано ниже:

См. Комментарии в коде для объяснения.

class Test extends React.Component {
    constructor(props){ // this code runs only once
        super(props);
        this.state = {  // set both initial value and final value to 0.
            initialValue: 0,
            finalValue: 0,
        };
        this.alpha = this.alpha.bind(this);
    }
    componentDidUpdate(props, state){  // runs everytime after component updates, the arguments props and state are previous props and state before update.
        // this check is important, you are doing set state inside componentDidUpdate it must be inside some condition
        // otherwise you will be stuck in infinite loop as component updates everytime state changes
        if(state.initialValue!==this.state.initialValue){  // if initial value was changed(by function alpha) change final value too.
            console.log('input changed');  // just to see it working correctly, remove it later
            this.setState({ finalValue: this.state.initialValue * 10 });  // set final value to initial value * 10
        }
    }

    alpha (ev){
        this.setState({ [ev.target.name]: ev.target.value });
    }    
    render() {

        return (
            <div>
                <input type="number" value={this.state.initialValue} onChange={this.alpha} name="initialValue" id="initialValue"/>
                <span>{this.state.finalValue}</span>
                {% or do this and skip componentDidUpdate
                <span>{this.state.initialValue * 10}</span> %}
            </div>
        );
    }  
}

Answer 2

В вашем коде вы делаете finalValue: initialValue* 10 внутри инициализации объекта, что неверно, потому что нет переменной initialValue.

Подхожу к вашему вопросу. Вы хотите отобразить что-то основанное на значении в вашем штате. Для этого вам на самом деле не нужны 2 ключа в объектах, потому что второй всегда в 10 раз больше одного из ключей.

Так что вместо того, чтобы хранить его в состоянии. Я прямо умножил на 10 в рендере. Это работает, потому что каждый раз, когда вы меняете значение внутри поля ввода, форма рендерится и, следовательно, рендеринг вызывается снова. И поскольку перед рендерингом ваш initialValue обновлен, вы получаете 10-кратное значение в span.

class App extends React.Component {
  state = {
    initialValue: 0,
  }
  render() {

    return (
    <div>
        <input type="number" value={this.state.initialValue} onChange={this.alpha} name="initialValue" id="initialValue"/>
        <span>{this.state.initialValue * 10}</span>
    </div>
   )
  }
   alpha = (ev) => {
    this.setState({
            [ev.target.name]: ev.target.value
    });
   }

}
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>