React select onChange不更改选定值

Question

我有一个React组件，它呈现了一些html，部分html是一个select元素。下面的代码用于显示初始select元素的默认值，并在您选择其他元素时更改所选值。

我的问题是，我有一个人的列表，当你点击其中一个人时，页面上使用该列表的部分的值将更新为该人的值(姓名、电子邮件等)。我相信这些更新都是正确的，因为this.props.agent已经更新了。我目前还不了解这些代码。我的问题是，select元素没有考虑到this.props.agent中的更改，从而为team重新选择了正确的保存值。我确信在constructor()中使用state不是正确的方法。

我是个新手，所以如果我的问题不准确或者解释得不够好，请原谅。但是，当this.props.agent更新时，我如何让它更新预先选择的选项？

import React from 'react'
import axios from 'axios'

export class AgentTeam extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            teams: [],
            selectedTeam: this.props.agent.team || ''
        }

        this.handleOnClick = this.handleOnClick.bind(this)
        this.handleOnChange = this.handleOnChange.bind(this)
    }

    componentDidMount() {
        axios.get(
            ... ajax setup ...
        ).then(response => {
            this.setState({
                teams: response.data,
            })
        }).catch(error => {
            throw error
        })
    }

    handleOnClick() {
        const selectedTeam = document.querySelector('.team-selection').value

        axios.post( ...ajax stuff... )
    }

    handleOnChange = (event) => {
        this.setState({
            selectedTeam: event.target.value
        })
    }

    render() {
        const teamList = this.state.teams.map((team, i) =>
            <option value={team.team_name} key={i}>
                {team.team_name}
            </option>
        )

        return (
            <div>
                <div className='agent-team-heading'>
                    <span>Team</span>
                </div>
                <div className='agent-team-selector'>
                    <select className='team-selection' value={this.state.selectedTeam} onChange={this.handleOnChange}>
                        <option value=''>Assign Team</option>
                        {teamList}
                    </select>
                    <button className="agent-team-button" onClick={this.handleOnClick}>
                        <span>SAVE</span>
                    </button>
                </div>
            </div>
        )
    }
}

Answer 1

您可以使用componentDidUpdate()来检查传入的道具是否不同：

componentDidUpdate(nextProps) {
  if (nextProps.agent.team !== this.props.agent.team) {
    this.setState({ selectedTeam: nextProps.agent.team })
  }
}

在componentDidUpdate中，nextProps表示传入的道具。这将检查它们是否不同，并且setState将确保组件重新呈现。

此外，这将在组件第一次收到属性时运行，这意味着您不应该在状态中设置默认值。

注意:通过使用querySelector来获取select菜单的值，您可以混合各种方法。理想情况下，您可以使用状态中的值-这样您就可以确保设置并获得正确的值，而不是混合方法并可能获得未更新的版本。

Answer 2

需要告诉React触发函数onClick

onClick={() => this.handleOnClick()} <-----

为了帮助节省代码，您还可以使用ES6通过执行箭头函数来将函数绑定到this。它不能100%确定它是否会在未来出现，但它被广泛使用，所以我认为他们会采用它。

handleOnClick = () => {
  const selectedTeam = document.querySelector('.team-selection').value

  axios.post( ...ajax stuff... )
}