时间戳

首页 > 解决方案 > 如何将值从反应组件返回到调用模块？

javascript - 如何将值从反应组件返回到调用模块？

问题描述

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

DOW 组件的精简版：

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;

=======

调用组件的片段：

import React, { Component } from "react";
import Nav from "../../components/Nav";
import Location from "../../components/Location";
import DeleteBtn from "../../components/DeleteBtn";
import Jumbotron from "../../components/Jumbotron";
import DOW from "../../components/DOW";
import API from "../../utils/API";
import { Link } from "react-router-dom";
import { Col, Row, Container } from "../../components/Grid";
import { List, ListItem } from "../../components/List";
import { Input, TextArea, FormBtn } from "../../components/Form";

class FoodSpecials extends Component {
  state = {
    foodSpecial: [],
    special: "",
    price: "",
    details: ""
  };

  componentDidMount() {
    this.loadfoodSpecial();
  }

  handleInputChange = event => {
    const { name, value } = event.target;
    this.setState({
      [name]: value
    });
  };
  handleFormSubmit = event => {
    event.preventDefault();
    if (this.state.special && this.state.price) {
      console.log(this.state.special, this.state.price, this.state.daily, this.state.mon);
    }
  };


  render() {
    return (

      <Container fluid>
...
              <Col size="md-12">
                <h4>
                  Day of week:
                </h4>
                <DOW />
              </Col>
...
          </Col>
        </Row>
      </Container>
    );
  }
}

export default FoodSpecials;

我环顾四周寻找一个 NPM，它只显示带有复选框的星期几，但一直找不到一个，这就是我尝试这段代码的原因。

提前致谢。

标签： javascriptreactjs

解决方案

在您的 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.
}

推荐阅读