Question

（（React新手））

我正在尝试让其他工作（上面列出的salal.job.id）通过点击传递。作业已经通过axios调用获得。有没有更简单的方法可以做到这一点？另外，两次调用this.makesalary是否正确（一次在componentDidMount中，另一次通过单击）？

这就是我要尝试通过的

 makesalary(slug = "charlotte") {
        axios.get(`https://api.teleport.org/api/urban_areas/slug:${slug}/salaries/`)
            .then(results => {
                console.log(results)
                const filteredata = results.data.salaries.filter(salary=>{
                    if(salary.job.id === "UX-DESIGNER"){
                        return true

                    }
                    if (salary.job.id === "WEB-DEVELOPER"){
                        return true
                    }
                    if(salary.job.id === "MOBILE-DEVELOPER"){
                        return true
                    }

                    return false
                })
                this.setState({salaries:
                    filteredata
                })
                }
            )

    }

可以叫两次吗？位置正确吗？

componentDidMount (){
        this.makesalary(this.props.slug)
    }

    _onclick(salary){
       this.makesalary(salary.job.id)


    }

这里是渲染

<div>
        
        <h2>What Tech Job are you in currently?</h2>
        <CardGroup>
          <Card>
            <Card.Img variant="top" src= {Mobileicon} />
            <Card.Body>
              <Card.Title>Mobile Developer</Card.Title>
              <Card.Text>
                Mobile Developer specialise in mobile technology such as building apps for Google's Android, Apple's iOS and Microsoft's Windows Phone platforms. 
              </Card.Text>
            </Card.Body>
            <Card.Footer>
            <Button variant="danger" onClick={this._onclick}>Pick this Job!</Button>{' '}
            </Card.Footer>
          </Card>
          <Card>
            <Card.Img variant="top" src= {UXicon} />
            <Card.Body>
              <Card.Title>UX Designer</Card.Title>
              <Card.Text>
              In a nutshell, the UX designer is responsible for how a product or website feels.
              The UX designer's job is to zero in on users' underlying emotional and functional needs.
              </Card.Text>
            </Card.Body>
            <Card.Footer>
            <Button variant="danger" >Pick this Job!</Button>{' '}
            </Card.Footer>
          </Card>
          <Card>
            <Card.Img variant="top" src={Webdevelop} />
            <Card.Body>
              <Card.Title>Web Developer</Card.Title>
              <Card.Text>
              A Web Developer is responsible for the coding, design and layout of a website according to a company's specifications.
              As the role takes into consideration user experience and function, a certain level of both graphic design and computer programming is necessary.
              </Card.Text>
            </Card.Body>
            <Card.Footer>
            <Button variant="danger" > 
        Pick this Job!</Button>{' '}
            </Card.Footer>
          </Card>
        </CardGroup> 
        </div>
        
        )
        
    }

Answer 1

我想提供帮助，所以我将指出一些事情并提出一些建议。在开始之前，我必须向我道歉，如果我说的话不正确，并且如果有人对此进行了纠正，将不胜感激。

我还要假设您的makesalary函数已在上面定义（显示Axios调用的位置）。

在componentdidmount方法中，使用从props获得的参数调用makealary。如果您的道具有效，那绝对没问题。

您也碰巧在makesalary方法中调用_onclick。我建议您将其重命名为handleClick或onClickHandler之类，以使其更清晰，并删除不必要的前面的_（除非您正在使用惯例）。该方法本身看起来不错。

使用按钮调用_onclick时，请记住它将把event传递到方法中。您应该通过在按钮上传递() => _onclick(salary)之类的功能到onClick来处理此问题（因为您不打算将event用于任何事情）。除了正确处理事件之外，这还可以帮助您传递_onclick的正确参数。在您提供的代码段中，似乎onClick没有将任何参数传递给_onclick函数。

我建议您阅读有关以下内容的官方React文档： https://reactjs.org/docs/handling-events.html。

希望我有所帮助！

编辑：如果您想知道，两次调用同一个方法绝对可以！

反应-onClick遇到问题（反应）

1 个答案: