Question

好的，所以我对编码还是比较新的。我试图使用onClick函数管理我的计算器的状态。我的数据库中有一份成分列表。我已经设置好了，所以我可以从数据库及其组件中列出的所有内容中提取所有内容。我试图设置它，所以当我点击个人名称时，它将改变下面列出的属性。我觉得我在正确的轨道上，但似乎无法弄明白。

    import React, { Component } from 'react';
    import $ from 'jquery';
    import '../index.css';

    class StepFive extends Component{
      constructor(props) {
        super(props)
        this.state = {
            ingredients: false,
        counter: 0
      }
     }

      componentDidMount() {
          var self = this;
           $.ajax({
            method: 'GET',
            url: 'http://localhost:3002/api/ingredients',
      })
      .done(function(ingredients){
            self.setState({ingredients: ingredients})
      })
    }

    handleChange(e){
      this.setState({counter: e.target.value})
    }


    listAll(){
      return (
        <div>
          <div className="vertical-menu">
          {this.state.ingredients.map(function(ingredients, i){
            console.log(i)
            return <div>
              <span><a key={i} href="#" onClick={this.handleChange(i)}>{ingredients.name}</a> <a href='#'>+</a></span>
            </div>
          })}
        </div>
      </div>)
    }

    render() {
      console.log(this.state, 'in render')
      if(this.state.ingredients === false){
        return(<div><span>loading</span></div>)
      } else {
          return(
            <div className='stepFiveBox'>
              {this.listAll()}
              <ul>
                <li>Hardness=
                  {this.state.ingredients[this.state.counter].hardness}</li>
            <li>Cleansing={this.state.ingredients[this.state.counter].cleansing}</li>
            <li>Condidtion={this.state.ingredients[this.state.counter].condition1}</li>
            <li>Bubbly={this.state.ingredients[this.state.counter].bubbly}</li>
            <li>Creamy={this.state.ingredients[this.state.counter].creamy}</li>
            <li>Iodine={this.state.ingredients[this.state.counter].iodine}</li>
            <li>INS={this.state.ingredients[this.state.counter].ins}</li>
            <li>Lauric={this.state.ingredients[this.state.counter].lauric}</li>
            <li>Myristic={this.state.ingredients[this.state.counter].myristic}</li>
            <li>Palmitic={this.state.ingredients[this.state.counter].palmitic}</li>
            <li>Stearic={this.state.ingredients[this.state.counter].stearic}</li>
            <li>Ricinoleic={this.state.ingredients[this.state.counter].rincinoleic}</li>
            <li>Oleic={this.state.ingredients[this.state.counter].oleic}</li>
            <li>Linoleic={this.state.ingredients[this.state.counter].linoleic}</li>
            <li>Linolenic={this.state.ingredients[this.state.counter].linolenic}</li>
            <li>NaOH SAP={this.state.ingredients[this.state.counter].sap}</li>
          </ul>
        </div>
      )
    }
      console.log(this.listAll(),)}
  }
  export default StepFive

Answer 1

问题在于你的onClick处理程序。你在做什么  这是在渲染时调用handleChange 。

为了在点击时调用该功能，您只需传递该功能而不调用它。 

为了将特定参数传递给该函数，您有两个选择：  this.handleChange(i)}> 要么： 

以下是使用.bind语法的示例： https://codesandbox.io/s/Z461QVox8

Answer 2

你可以尝试替换这个：

handleChange(e){
   this.setState({counter: e.target.value})
}

到这一个：

handleChange = (e) => {
   this.setState({counter: e.target.value})
}

并替换这个：

<a key={i} href="#" onClick={this.handleChange(i)}>

到这一个：

<a key={i} href="#" onClick={() => this.handleChange(i)}>

希望可以帮助你：）

Answer 3

是这个问题。

在listAll函数中我添加了一个

var self = this;

然后将所有这些转为自我。得到错误值未定义...所以我意识到我不需要e.target.value我需要e。将handelChange函数更改为

handleChange = (e) => { this.setState({counter: e}); }

badabingbadaboom

反应。使用索引使用onClick函数管理状态

3 个答案: