Question

我有以下代码来选择提供某些特价商品的一周中的某几天或几天。我将在整个应用程序中重复使用此代码。我遇到的问题是我无法确定如何将true / false值返回给调用模块。

DOW组件的简化版本：

<a href="http://fbgadgets.blogspot.com/2014/01/link-change-into-button.html">ReadMore:</a>
<img id="ButtonId" src="https://www.w3schools.com/tags/smiley.gif" width="107" height="98">
<p id="TextBox"> </p>

=======

调用组件的片段：

import React from "react";

class DOW extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      daily: true,
      sun: false,
      mon: false,
      tue: false,
      wed: false,
      thu: false,
      fri: false,
      sat: false
    };

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

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

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

  render() {
    return (
      <div>
        <label>
          Daily:
          <input
            name="daily"
            type="checkbox"
            checked={this.state.daily}
            onChange={this.handleInputChange} />
        </label>
        <span> </span>
        <label>
          Sun:
          <input
            name="sun"
            type="checkbox"
            checked={this.state.sun}
            onChange={this.handleInputChange} />
        </label>
        <span> </span>
        <label>
          Mon:
          <input
            name="mon"
            type="checkbox"
            checked={this.state.mon}
            onChange={this.handleInputChange} />
        </label>
        <span> </span>
 ...
        <label>
          Sat:
          <input
            name="sat"
            type="checkbox"
            checked={this.state.sat}
            onChange={this.handleInputChange} />
        </label>
        <span> </span>
        <br />
      </div>
    );
  }
}

export default DOW;

我一直在寻找一个NPM，该NPM仅显示一周中的几天，并带有复选框，但是无法找到一个NPM，这就是我尝试使用此代码的原因。

谢谢。

Answer 1

在FoodSpecials类中，添加一个函数：

getDOWs = days => {
  console.log(days.wed); //etc...
}

然后将此函数传递给子组件：

<DOW onInputChange={this.getDOWs} />

然后最终从DOW类中调用函数：

handleInputChange(event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;

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

  this.props.onInputChange(this.state); //This is where you call the function.
}

如何将值从React组件返回到调用模块？

1 个答案: