在JSX|React中如何将prop传递到按钮状态，以便按钮状态可以加载新页面？

Question

尝试使用react datepicker退出搜索，然后检查可用日期。在将道具传递到btn时遇到一些问题，因此我可以根据所选日期创建新页面。

所有东西都正确导入了，我们可以忽略以下内容：我的数据采集器组件和我需要POP使用的BTN搜索组件。

我试图在组件上的每个元素中传递道具，并在组件中内置btn。我读过更好的方法是将道具向下传递到元素链中。所以我最后试着这样做。似乎仍然无法抓住约会狂console.log它。也试图建立警报。

class Datepicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert("A name was submitted: " + this.state.value);
    event.preventDefault();
  }
  state = {};
  render() {
    console.log(this.props.value);
    return (
      <>
        <FormGroup>
          <InputGroup className="input-group-alternative">
            <InputGroupAddon addonType="prepend">
              <InputGroupText
              >
                <i className="ni ni-calendar-grid-58" />
              </InputGroupText>
            </InputGroupAddon>
            <ReactDatetime
            value={this.state.value}
            onChange={this.handleChange}
            inputProps={{
              placeholder: "Date Picker Here"
            }}
            timeFormat={false}
            />
          </InputGroup>
        </FormGroup>
        <Btnsearch />
      </>
    );
  }
}

export default Datepicker;

class Btnsearch extends React.Component {
    render() {
        return (
        <button value={this.props.value} className="btn btn-success search-card-btn">Search</button>
    );
    }
};

export default Btnsearch;

我希望在单击按钮以填充新页面时，console.log并提醒道具已更改。我没有定义道具

Answer 1

只要把道具传下来：

 <Btnsearch value={this.state.value}/>

否则您的组件将永远无法获得它。

编辑：您的代码中有几个问题，我制作了一个代码片段供您检查。

https://stackblitz.com/edit/react-af37vl

选择一个日期，点击“搜索”，日期将被登录到控制台。

通知（来自react datetime文档）：

日期更改时触发回调。如果输入中的日期有效，回调接收选定的矩对象作为唯一参数。如果输入中的日期无效，回调接收输入的值（字符串）。