Question

尝试使用react datepicker从搜索中查找，然后检查可用日期。在将道具传递到btn时遇到了一些麻烦，因此我可以根据选择的日期创建新页面。

一切都正确导入，我们可以在下面忽略我的数据选择器组件和Btnsearch组件，我需要使用pops。

我尝试将prop传递给组件中的每个元素，并将btn内置到组件中。我读过更好的方法来将道具传递到元素链中。为了孩子们，我最后尝试这样做。

似乎仍然无法捕捉到Datepicked甚至无法将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文档）：

日期更改时触发回调。回调收到如果输入中的日期为有效。如果输入中的日期无效，则回调将收到输入的值（字符串）。

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

1 个答案: