Question

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

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

我是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

您可以使用componentDidUpdate（）检查传入的道具是否不同：

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

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

此外，它将在组件首次接收道具时运行，这意味着您不必将默认值设置为state。

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

Answer 2

需要告诉React触发功能onClick

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

仅需注意一点以帮助节省代码，您还可以使用ES6通过执行箭头功能将功能绑定到this。不确定它是否会在将来100％可用，但是它已被广泛使用，因此我认为他们会采用它。

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

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

反应选择onChange不会更改所选值

2 个答案: