如何将状态值从表单传递到其子模态？

Question

我是 React 的新手，我不确定最好的方法是什么。

我有一个模态组件，一旦用户在表单中填写值并单击 Preview Voucher 以在模态中打印这些值。

我试过这段代码，下面我有 Preview Voucher 组件，带有构造函数和事件。

// PreviewVoucher.js
class PreviewVoucher extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      voucherNumber: "0",
      //
      addModalShow: false
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSelectChange = this.handleSelectChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange(e) {
    const target = e.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const inputName = target.name;

    this.setState({
      [inputName]: value
    });
  }

  handleSelectChange(e) {
    this.setState({ labelSize: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
  }
}

我想在具有子组件的页面上呈现此表单 Modal Voucher

// PreviewVoucher.js
  render() {
    let addModalClose = () => this.setState({ addModalShow: false });
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <p>Number of vouchers to create:</p>
          <input
            min="0"
            type="number"
            name="voucherNumber"
            value={this.state.voucherNumber}
            onChange={this.handleInputChange}
          />
        </div>
        <div>
          <h4>Message:</h4>
          <p>Some message</p>
          <ButtonToolbar>
            <Button onClick={() => this.setState({ addModalShow: true })}>
              Preview Voucher
            </Button>
            <ModalVoucher
              show={this.state.addModalShow}
              onHide={addModalClose}
            />
          </ButtonToolbar>
        </div>
        <input type="submit" value="Create voucher" />
      </form>
    );
  }

这是子组件 - Modal Voucher 将包含一些文本并希望显示来自 Preview Voucher[=28= 的动态值] 里面的组件。

// ModalVoucher.js class ModalVoucher extends React.Component { render() { return ( <Modal {...this.props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered > <Modal.Header closeButton> <Modal.Title id="contained-modal-title-vcenter"> Voucher preview </Modal.Title> </Modal.Header> <Modal.Body> <div>{/* update code here */}</div> </Modal.Body> <Modal.Footer> <Button onClick={this.props.onHide}>Close</Button> </Modal.Footer> </Modal> ); } }

Answer 1

如何在子组件中呈现父级的状态

您需要将 PreviewVoucher 的状态值作为 prop 传递给它的子 ModalVoucher。

// PreviewVoucher.js
render() {
  <ModalVoucher
    show={this.state.addModalShow}
    onHide={addModalClose}
    voucherNumber={this.state.voucherNumber}
  />
}

然后在ModalVouchers render方法中使用它。

// ModalVoucher.js
render() {
  <Modal.Body>
    <div>{this.props.voucherNumber}</div>
  </Modal.Body>
}

我把这个 sandbox 放在一起展示了它的实际效果。

其他建议

进行此更改后，您可能会在控制台中看到此错误

Warning: React does not recognize the `voucherNumber` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `vouchernumber` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

发生这种情况是因为您将所有道具直接传递到模态框，这底层库传递给 DOM 元素。

<Modal
  {...this.props}

正因如此，我认为直接转发所有道具通常是个坏主意而我更喜欢传递特定的道具。

<Modal
  show={this.props.show}
  onHide={this.props.onHide}

如何将状态值从表单传递到其子模态？

How to pass state value from form to its child modal?

javascript

popup

reactjs

react-modal

如何在子组件中呈现父级的状态

其他建议