反应选择 onChange 不改变所选值

Question

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

我的问题是我有一个人员列表，当您单击其中一个时，使用该人员的页面部分上的值会更新为该人的值（姓名、电子邮件等）。我相信这些都正确更新，因为this.props.agent 得到了更新。我目前没有深入了解该代码。我的问题是选择元素不尊重this.props.agent 中的更改，因此为team 重新选择了正确的保存值。我确定在constructor() 中使用state 不是正确的方法。

我是 React 新手，如果我的问题不准确或解释不够好，请原谅我。但是当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

需要告诉React触发onClick函数

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

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

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

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

Answer 2

你可以使用 componentDidUpdate() 来检查传入的 props 是否不同：

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

在componentDidUpdate中，nextProps代表传入的props。这将检查它们是否不同，并且 setState 将确保组件重新渲染。

此外，这将在组件第一次收到 props 时运行，这意味着您不必在 state 中设置默认值。

注意：您正在混合方法，通过使用querySelector 来获取选择菜单的值。理想情况下，您会使用 state 中的值 - 这样您可以确保设置和获取正确的值，而不是混合方法并可能获取未更新的版本。