Reactでセレクトボックスの挿入方法がわかりません。

Question

下記のコードにセレクトボックスを加え、1～3を選択できるようにして、選択した数字をSumの式に掛けたいです。セレクトボックスのコードは、見つけましたが、どうやってつなげればいいかわかりません。
よろしくお願いします。

import React from 'react';

class Calc extends React.Component{
    box = {
        display: "flex",
        alignItems: "center",
        marginBottom: "50px"
    }
    input = {
        fontSize: "20px",
        width: "60px",
        margin: "0 10px 00"
    }
    label = {
        fontSize: "20px",
        margin: "0 10px 0 0"
    }
    constructor(props){
        super(props);
        this.state = {
            val_left: "",
            val_right: "",
            val_sum:0
        }
        this.doChangeLeft = this.doChangeLeft.bind(this);
        this.doChangeRight = this.doChangeRight.bind(this);
    }
    doChangeLeft(e){
        let sum 
        if(this.props.val == "Total"){
            sum = Number(e.target.value) / Number(this.state.val_right);
        }
        this.setState({
            val_left:e.target.value,
            val_sum:sum
        })
                
    }
    doChangeRight(e){
        let sum 
        if(this.props.val =="Total"){
            sum = Number(this.state.val_left) / Number(e.target.value);
        }
        this.setState({
            val_right:e.target.value,
            val_sum:sum
        })
    }
    render(){
        return(
            <div style={this.box}>
                <p style={this.label}>Square meters</p>
                <input type="text" onChange={this.doChangeLeft} value={this.state.val_left} style={this.input} />
                <p style={this.label}>Paint adequacy(m2/l)</p>
                <input type="text" onChange={this.doChangeRight} value={this.state.val_right} style={this.input} />
                <p style={this.label}>{this.props.val}</p>
                <p style={this.label}>{this.state.val_sum}</p>
                <p style={this.label}>Cans</p>
            </div>
        )
    }
}
export default Calc;

class Layer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Choose how many times you want to paint:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">1</option>
            <option value="lime">2</option>
            <option value="coconut">3t</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Comments

[coolwind0202]

見つけたセレクトボックスのコードも提示してください。

[Chibichan]

見つけましたコードを追加しました。
よろしくお願いします。

[FKM]

そのままコピペだけのようですね…。あちこちにテンプレートの分離の方法とデータのやりとりの方法が載っているので、参考にしたらどうでしょうか。

参考までに、Reactは子コンポーネントから親コンポーネントへの値の受け渡しはできません。

Answer 1

Square meters や Paint adequacy と同じように、フォームの value を Calc コンポーネントの State で管理し、変更があればその State を書き換えれば良いと思います：

import React from 'react';

class Calc extends React.Component{
    box = {
        display: "flex",
        alignItems: "center",
        marginBottom: "50px"
    }
    input = {
        fontSize: "20px",
        width: "60px",
        margin: "0 10px 00"
    }
    label = {
        fontSize: "20px",
        margin: "0 10px 0 0"
    }
    constructor(props){
        super(props);
        this.state = {
            val_left: "",
            val_right: "",
            val_sum:0,
            selectValue: 1
        }
        this.doChangeLeft = this.doChangeLeft.bind(this);
        this.doChangeRight = this.doChangeRight.bind(this);
        this.handleSelectChange = this.handleSelectChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSelectChange(event) {
      let valueNumber = Number(event.target.value);
      
      if (!Number.isNaN(valueNumber)) {
        let sum;
        if(this.props.val == "Total"){
          sum = Number(this.state.val_left) / Number(this.state.val_right)　* valueNumber;
        }
        this.setState({
          selectValue: valueNumber,
          val_sum: sum
        });
      }
    }


    doChangeLeft(e){
        let sum 
        if(this.props.val == "Total"){
            sum = Number(e.target.value) / Number(this.state.val_right)　* this.state.selectValue;
        }
        this.setState({
            val_left:e.target.value,
            val_sum:sum
        })

    }
    doChangeRight(e){
        let sum 
        if(this.props.val =="Total"){
            sum = Number(this.state.val_left) / Number(e.target.value) * this.state.selectValue;
        }
        this.setState({
            val_right:e.target.value,
            val_sum:sum
        })
    }
    render(){
        return (
            <div style={this.box}>
                <p style={this.label}>Square meters</p>
                <input type="text" onChange={this.doChangeLeft} value={this.state.val_left} style={this.input} />
                <p style={this.label}>Paint adequacy(m2/l)</p>
                <input type="text" onChange={this.doChangeRight} value={this.state.val_right} style={this.input} />
                <p style={this.label}>{this.props.val}</p>
                <p style={this.label}>{this.state.val_sum}</p>
                <p style={this.label}>Cans</p>
                <label>
                  Choose how many times you want to paint:
                  <select value={this.state.selectValue} onChange={this.handleSelectChange}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3t</option>
                  </select>
                </label>
            </div>
        )
    }
}

export default Calc;

Comments

[Chibichan]

ありがとうございます！習い始めたばかりなので、まだまだですが、ご提案を参考に勉強させていただきます。