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

我改变了我的代码，你可以先在子节点创建获取目标值的函数并传递给道具函数

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

使用reactJS创建价格范围字段（最小和最大）

2 个答案: