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