Question

我知道这个问题在反应中很常见，但这有点不同。

我通过从下拉列表中选择我的产品来动态生成我的产品的条形码：

首先，state的值是示例，但它会从下拉列表中的on select事件更改。

当我的页面呈现时，首先它会生成条形码，但是我的值通过选择下拉列表而改变了它dint为我的下一个值生成条形码有代码和库。

class QRCodePage extends Component {
  constructor() {
    super();
    this.state = {
      productid: "exaple"
    };
  }
  setQRCode(event) {
    this.setState = {
      productid: event.target.value
    };
  }
  render() {
    return (
      <div>
        <FormControl
          componentClass="select"
          placeholder="Select Product"
          onChange={this.setQRCode.bind(this)}
          required
        >
          <option value="">select</option>
          {this.props.products.map((product, i) =>
            <option key={i} value={product._id}>
              {product.productName}
            </option>
          )}
        </FormControl>
        <Barcode value={this.state.productid} />
      </div>
    );
  }
}

Answer 1

尝试这样做。它并没有解决这个问题，但它的代码更清晰，更好。也尝试这样做并告诉我控制台说的内容。

class QRCodePage extends Component {
  state = {
    productid: "exaple"
  };
  setQRCode = event => {
    //Note the arrow function, which binds the function to the component.
    //This way you can use "this" in the correct scope
    this.setState(
      {
        productid: event.target.value
      },
      () => {
        console.log(this.state.productid);
      }
    );
  };

  render() {
    return (
      <div>
        <FormControl
          componentClass="select"
          placeholder="Select Product"
          onChange={this.setQRCode}
          required
        >
          <option value="">select</option>
          {this.props.products.map((product, i) =>
            <option key={i} value={product._id}>
              {product.productName}
            </option>
          )}
        </FormControl>
        <Barcode value={this.state.productid} />
      </div>
    );
  }
}

当状态值的变化时如何更新子组件

1 个答案: