使用reactJS創建價格范圍字段（最小和最大）

Question

花了很多時間后，我需要在這里提供幫助。

我正在創建模板。 在這里我可以使用不同的表單字段。 一切正常。 我正在按預期從所有領域獲得價值。

但是問題是當我在一個組件中一起擁有2個輸入字段並將該組件傳遞給父組件並獲取值時。 然后將此值保存在對象中。

我希望它足夠清楚。 先感謝您

---

class Parent extends Component {
  handlePriceMinMax(event) {
    console.log(event.target.value);

    /* I cant set the right values here. 
    *  These values get overwritten with latest value. 
    *  Because I get value on keypress/onChange value */
    this.setState({
            priceRange: {
                min: event.target.value, 
                max: event.target.value
            }
        }
    );
  }
  render() {
    return (
      <Child onChange={this.handlePriceMinMax}/>
    )
  }
}

---

class Child extends Component {
  render() {
    return (
        <div className="form-group">
            <label>Price</label>
            <input type="number" onChange={this.props.onChange}/>
            <input type="number" onChange={this.props.onChange}/>
        </div>
    );
  }
}

export default Child;

Answer 1

我更改了代碼，可以先在子級中創建函數以獲取目標值並傳遞給props函數

class Child extends Component {
  submitInput(e) {
    this.props.onChange(e)
  }
  render() {
    return (
        <div className="form-group">
            <label>Price</label>
            <input type="number" onChange={(e) => this.submitInput(e)}/>
            <input type="number" onChange={(e) => this.submitInput(e)}/>
        </div>
    );
  }
}

export default Child;

Answer 2

https://codesandbox.io/s/zr30923nrm

我認為這應該有效。 因此，基本上，您需要告訴handlePriceMinMax您要更新什么值。

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { priceRange: { min: 0, max: 0 } };
  }
  handlePriceMinMax = (value, event) => {
    const priceRange = this.state.priceRange;
    priceRange[value] = event.target.value;
    this.setState({ priceRange });
  };
  render() {
    return <Child onChange={this.handlePriceMinMax} />;
  }
}

class Child extends React.Component {
  render() {
    return (
      <div className="form-group">
        <label>Price</label>
        <input type="number" onChange={this.minChange} />
        <input type="number" onChange={this.maxChange} />
      </div>
    );
  }

  minChange = e => {
    this.props.onChange("min", e);
  };

  maxChange = e => {
    this.props.onChange("max", e);
  };
}