Question

我是新手，想要在表格中添加说明，开始日期和状态，并尝试在日期之间添加日期，并将其存储在“天”字段中。进入Fromdate比较少。我无法在reactjs代码中找到天数的计数。请建议我

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Button,Table,Input, Form, Row, Col} from 'reactstrap';

    class Products extends React.Component {

      constructor(props) {
        super(props);

        //  this.state.products = [];
        this.state = {};
        this.state.filterText = "";
        this.state.products = [

        ];

      }

      handleUserInput(filterText) {
        this.setState({filterText: filterText});
      };

      handleRowDel(product) {
        var index = this.state.products.indexOf(product);
        this.state.products.splice(index, 1);
        this.setState(this.state.products);
      };

      handleAddEvent(evt) {
        var id = (+ new Date() + Math.floor(Math.random() * 999999)).toString(36);
        var product = {
          id: id,
          description: "",
         fromdate: "",
          todate: "",
         totaldays:0 
        }
        this.state.products.push(product);
        this.setState(this.state.products);

      }

      handleProductTable(evt) {
        var item = {
          id: evt.target.id,
          name: evt.target.description,
          value: evt.target.value
        };
        var products = this.state.products;

        var newProducts = products.map(function(product) {
          for (var key in product) {
            if (key == item.name && product.id == item.id) {
              product[key] = item.value;

            }
          }
          return product;
        });
        this.setState(newProducts);
        console.log(this.state.products);
      };
      render() {

        return (
          <div>

            <ProductTable onProductTableUpdate={this.handleProductTable.bind(this)} onRowAdd={this.handleAddEvent.bind(this)} onRowDel={this.handleRowDel.bind(this)} products={this.state.products} filterText={this.state.filterText}/>
          </div>
        );

      }

    }


    class ProductTable extends React.Component {

      render() {
        var onProductTableUpdate = this.props.onProductTableUpdate;
        var rowDel = this.props.onRowDel;
        var filterText = this.props.filterText;

        var product = this.props.products.map(function(product) {
          if (product.description.indexOf(filterText) === -1) {
            return;
          }
          return (<ProductRow onProductTableUpdate={onProductTableUpdate} product={product} onDelEvent={rowDel.bind(this)} key={product.id}/>)
        });
        return (
          <div>

使用＆＃34; +＆＃34;按钮我在表格中添加行，如附图by clicking add symbol rows are added

所示

          <Button type="button"  size="xl" color="success" onClick={this.props.onRowAdd} className="btn btn-success pull-right">+</Button>

            <Table striped>
              <thead>
                <tr>
                  <th>Holiday List</th>
                   <th>From</th>
                   <th>To</th>
                   <th>totaldays</th>
                   <th></th>
                </tr>
              </thead>

显示表格内容
{产物}

              </tbody>

            </Table>
          </div>
        );

      }

    }

    class ProductRow extends React.Component {
      onDelEvent() {
        this.props.onDelEvent(this.props.product);

      }
      render() {

        return (
          <tr>
            <EditableCell1 onProductTableUpdate={this.props.onProductTableUpdate} cellData={{
              "type": "description",
              value: this.props.product.description,
              id: this.props.product.id
            }}/>
            <EditableCell2 onProductTableUpdate={this.props.onProductTableUpdate} cellData={{
              type: "fromdate",
              value: this.props.product.fromdate,
              id: this.props.product.id
            }}/>
            <EditableCell3 onProductTableUpdate={this.props.onProductTableUpdate} cellData={{
              type: "todate",
              value: this.props.product.todate,
              id: this.props.product.id
            }}/>
            <EditableCell4 onProductTableUpdate={this.props.onProductTableUpdate} cellData={{
              type: "totaldays",
              value: this.props.product.totaldays,
              id: this.props.product.id
            }}/> 



            <td >
             <Button
               onClick={this.onDelEvent.bind(this)}  >X</Button>
            </td>
          </tr>
        );

      }




    }

用于添加fromdate的单元格

     class EditableCell2 extends React.Component {

      render() {
        return (
          <td>
           <Input type='date' name="fromdate" />
          </td>
        );

      }

    }

用于添加日期的单元格

    class EditableCell3 extends React.Component {

      render() {
        return (
          <td>
           <Input type='date' name="todate" onFocus={ this.onFocus }/>
          </td>
        );

      }

    }

用于添加内容的单元格

    class EditableCell1 extends React.Component {

      render() {
        return (
          <td id="desc">
            <Input type='text' name="description" />

          </td>
        );

      }

    }

单元格表示日期之间的总天数

    class EditableCell4 extends React.Component {

      render() {
        return (
          <td id="desc">
            <Input type='text' name="totaldays"  />
          </td>
        );

      }


    }

    export default Products;

Answer 1

即使我无法正确理解你的问题，我建议使用片段js，它有一个巨大的库来处理日期和时间相关的功能。你可以npm安装并导入它。你能详细说明一下这个问题。

如何计算使用reactjs和验证firstdate的日期之间的天数是第二天

1 个答案: