javascript - ReactJS - 将值传递给组件

Question

我有一个用户输入数字的组件:

import React, { Component } from 'react';
import Place_holder from './place_holder';

class Body extends Component {
    constructor(props) {
        super(props);
        this.state = { value: ""};
    }

    handleChange(value) {
        this.setState({value});
    }

    render() {
        return (
            <div>
                <input
                    type="number"
                    value={this.state.value}
                    onChange={event => this.handleChange(event.target.value)}
                />

                <Place_holder num={this.state.value}  />
            </div>
        )
    }
}

export default Body;

值被传递给 Place_holder，其中三个不同的元素应该做 3 种不同的事情(为了参数的缘故:第 1 列:num x 2，第 2 列:num/2，第 3 列:num X num)。现在，当我在输入框中键入数字时，它会在三列中自动更新，但是每当我尝试编写任何方法来应用于数字并实时更改它时，我都会遇到各种错误

import React, { Component } from 'react';


class Place_holder extends Component {
    constructor(props) {
        super(props);
    }



    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-md-4">{this.props.num}</div>
                    <div className="col-md-4">{this.props.num}</div>
                    <div className="col-md-4">{this.props.num}</div>
                </div>
            </div>
        )
    }
}

export default Place_holder;

我该怎么做？

Answer 1

切勿直接修改 props，而是计算您需要的内容。

例如:

render() {
    const column1 = this.props.num*2;
    const column2 = this.props.num/2;
    const column3 = this.props.num*this.props.num;

    return (
        <div>
            <div className="row">
                <div className="col-md-4">{column1}</div>
                <div className="col-md-4">{column2}</div>
                <div className="col-md-4">{column3}</div>
            </div>
        </div>
    )
}