小编sto*_*ock的帖子

我试图用.env文件扩展名保存文件，但.env在“另存为”下拉选项中看不到任何文件扩展名。

我还尝试将其重命名为，.env但将其另存为文本文件（请参见屏幕截图）如何解决此问题？

我制作了 2 个按钮，一个用于递增，另一个用于递减。当我点击减号按钮时，它不应该显示负值，但在我的情况下，当我点击减号按钮（初始值为零）时，它显示 -1，再次点击它显示零为什么当我点击减号按钮时会发生这种情况输入框内的值不应减少到 0 以下。

日期选择器.js：

import React, { Component } from 'react';
import './datepicker.css';

class DatePicker extends Component {

  constructor(props){
    super(props);
     this.state = {
        counter:0
     };
   }

  increment(){
    this.setState({
      counter: this.state.counter + 1
    });
  }

  decrement(){
      if(this.state.counter < 0){
        this.setState({
            counter:0
        });
      }else {
        this.setState({
            counter: this.state.counter - 1
        });
      }
  }


  render() {
    return (
      <div>
        <div id="center">
            <label for="name">Date</label>
            <p></p>
            <button type="button" className="btn btn-success" id="plus" onClick={this.increment.bind(this)}>+</button>
            <input type="text" id="date" value={this.state.counter}/>
            <button type="button" className="btn btn-danger" id="minus" onClick={this.decrement.bind(this)}>-</button> …

我为1个问题制作了4个单选按钮。我已经使2个按钮提交并清除了输入。当我单击清除输入后提交表单时，它不会清除已选中的按钮以取消选中该如何使用reset 功能？

contactform.js：

import React, { Component } from 'react';

class ContactForm extends Component {
  constructor(props){
    super(props);
    this.state = {
        age:'',
        gender:'',
        health:'',
        name:'',
        email:'',
        info:'',
        fitness:''
    };
  } 

setAge(checkedValue){
    console.log(checkedValue);
    this.setState({
        age:checkedValue
    })
  }

setGender(checkedValue){
    console.log(checkedValue);
    this.setState({
        gender:checkedValue
    })
  }

  onChangeTextBoxGender(event){
  this.setState({gender: event.target.value})
  }

 savedata(age, gender, health, name, email, info, fitness){
        let newcontent = contentref.push();
        newcontent.set({
            age:this.state.age,
            gender:this.state.gender,
            health:this.state.health,
            name:this.state.name,
            email:this.state.email,
            info:this.state.info,
            fitness:this.state.fitness
        });
  }

  reset(){
    this.setState({
      age:'',
      gender:''
    })
  }

 render() {

    return (
      <div>

        <div id="center"> …

我正在尝试使用来自 chartist.js 链接的图表：https ://gionkunz.github.io/chartist-js/examples.html#simple-line-chart

当我尝试在我的代码中使用它们时，我让 Chartist 定义了如何将它导入到我的组件中？

代码：

   import React, { Component } from 'react';
import chartistGraph from "react-chartist";

const simpleLineChartData = {
          labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
          series: [
            [12, 9, 7, 8, 5],
            [2, 1, 3.5, 7, 3],
            [1, 3, 4, 5, 6]
          ]
}

class Chart extends Component {

  render(){
    return(
      <div>
            <chartistGraph data={simpleLineChartData} type={'Line'} /> 
      </div>

    )}

}

export default Chart;

上面的代码给出错误，说 Chartist 未定义。如何导入一些库并在 reactjs 中使用它。

我正在尝试使用 chartist.js 显示 Linechart。我曾经reduce()从props. 我的键year和值与average value平均值对象一样。但我无法显示折线图，因为我无法在图表上看到任何线条，我遇到了类型错误。我已经创建了 React 组件，并在里面componentDidMount()添加了我的折线图代码。我认为这个问题与 javascript/reactjs 而不是 chartist.js 有关

代码：

class Linechart extends Component {

  constructor(props){
    super(props);
  }

  componentDidMount(){

        const totals = this.props.bowldata.reduce((a, {season, econ})  => {

          if (!a[season]) {
            a[season] = {sum: 0, count: 0};
          }

          if(econ !== null){
            a[season].count++;
            a[season].sum += parseInt(econ);

          }

          return a; 

      }, {});

        const averages = {};

        Object.keys(totals).forEach(key => {   

          averages[key] = totals[key].sum / totals[key].count;

        });

      console.log(averages);

      const series = Object.values(averages); …

我已经制作了分页组件，但无法将其放在主页上。我尝试了各种 CSS 样式，但分页没有居中，它总是出现在主页的左侧。

分页.js：

import React, { Component } from 'react';

class Pagination extends Component {

    handleClick(val){
    this.setState({
        end:val*16,
        start:end-16
    });
    const end = val*16;
    this.props.onChange(end - 16, end);
    }

  render() {

    return (
      <div>
        <div className="container">                 
              <ul className="pagination">
                <li><a href="#" onClick={this.handleClick.bind(this, 1)}>1</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 2)}>2</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 3)}>3</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 4)}>4</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 5)}>5</a></li>
              </ul>
          </div>
      </div>
    );
  }
}

export default Pagination;

分页.css：

.pagination {
    clear:both;
    position:relative;
    font-size:11px;
    text-align:center;
}

我也试过这种样式：

.pagination {
    text-align: …

我有功能=> city这是分类数据，即字符串，但是使用硬编码代替硬编码replace()吗？

train['city'].unique()
Output: ['city_149', 'city_83', 'city_16', 'city_64', 'city_100', 'city_21',
       'city_114', 'city_103', 'city_97', 'city_160', 'city_65',
       'city_90', 'city_75', 'city_136', 'city_159', 'city_67', 'city_28',
       'city_10', 'city_73', 'city_76', 'city_104', 'city_27', 'city_30',
       'city_61', 'city_99', 'city_41', 'city_142', 'city_9', 'city_116',
       'city_128', 'city_74', 'city_69', 'city_1', 'city_176', 'city_40',
       'city_123', 'city_152', 'city_165', 'city_89', 'city_36', .......]

我正在尝试的是：

train.replace(['city_149', 'city_83', 'city_16', 'city_64', 'city_100', 'city_21',
           'city_114', 'city_103', 'city_97', 'city_160', 'city_65',
           'city_90', 'city_75', 'city_136', 'city_159', 'city_67', 'city_28',
           'city_10', 'city_73', 'city_76', 'city_104', 'city_27', 'city_30',
           'city_61', 'city_99', 'city_41', 'city_142', 'city_9', 'city_116',
           'city_128', 'city_74', …