代码之家 › 专栏 › 技术社区 › Deadpool

状态反应JS中通过自动计算将数字乘以10

data-binding reactjs javascript

Deadpool · 技术社区 · 7 年前

在这个例子中,我希望用户增加或减少输入框中的数字,并且乘以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>

2 回复 | 直到 7 年前

Ashish 7 年前

在你的代码里 finalValue: initialValue* 10 对象内部初始化不正确,因为没有变量 initialValue .

来回答你的问题。您希望根据状态中的值显示一个位置。对于这个问题,对象中实际上不需要2个键,因为第二个键总是其中一个键的10倍。

所以不要把它存储在状态中。我在渲染中直接乘以10。这是有效的,因为每当您在输入框中更改值时,表单都会重新呈现,从而再次调用呈现。从那以后 初始值 更新后,您将获得10倍的跨度值。

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>

Vaibhav Vishal 7 年前

<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>
        );
    }  
}