Question

我正在使用带有自定义事件组件的React Big Calendar。

在我的自定义组件中，我需要显示一些用户可以单击（通过弹出窗口）的按钮。我使弹出窗口工作正常，但我还希望单击弹出窗口中的按钮时，通知BigCalendar的类得到通知。我们如何将“ onButtonClick”事件作为道具传递给我的自定义组件？这是我的代码的简化版本

class Parent extends Component {

    popoverButtonClickHandler = (e) => {
        //handle button click
    }

    render() {
        return (
            <BigCalendar
                ...
                events={myEvents}
                components={{
                    event: CustomEvent
                }}
            />
        );
    }
}

这是我的CustomEvent类

class CustomEvent extends Component {
    render() {
        return (
            <div>
                <p>My event title: {this.props.title}</p>
                <MyPopover>
                    <Button onClick={this.props.onPopoverButtonClick}>
                </MyPopover>
            </div>
        )
    }
}

我正在尝试弄清楚如何通过

onPopoverButtonClick={this.popoverButtonClickHandler}

到我的CustomEvent中，以便在单击按钮时通知父项。

有什么想法可以实现这一目标吗？谢谢

Answer 1

好的，在查看GitHub上的here后，我设法使它正常工作

import React from "react";

const CustomInput = ({
  // we'll intercept redux's "onChange" func, while leaving the other 
  // input props as is in "inputProps"
  input: { onChange, ...inputProps }, 
  // the "handleChange" func below is the parent func that will handle input changes
  handleChange, 
  // "rest" contains any additional properties (className, placeholder, type ...etc)
  ...rest 
}) => (
  // we spread out the "inputProps" and the "rest" of the props, then we add
  // an "onChange" event handler that returns the "event" and the 
  // input's "onChange" func to our "handleChange" parent func
  <input {...inputProps} {...rest} onChange={e => handleChange(e, onChange)} />
);

export default CustomInput;

这是CustomEventContainer和CustomEvent

class ControlledFormValue extends PureComponent { 

  // this parent func will handle updates through the "event.target.value"; 
  // the value can be changed/altered and then passed to the input's
  // "onChange" func to update the field
  handleChange = ({ target: { value } }, onChange) => {
    // this will alter the value by adding a "-" after each input update
    onChange(`${value}-`);
    setTimeout(() => console.log(this.props.values), 500);
  };

  render() {
    return (
      <form onSubmit={this.props.handleSubmit}>
        <div>
          <label>First Name</label>
          <div>
            <Field
              className="uk-input"
              name="firstName"
              component={CustomInput}
              type="text"
              placeholder="First Name"
              handleChange={this.handleChange}
            />
          </div>
        </div>
        ...etc
     </form>
    );
  }
}

如何将道具传递给React Big Calendar自定义组件？

1 个答案: