Question

所以我遇到了一些问题，但首先让我概述一下我要做的事情。当用户首次登录时，它会将它们带到/ home，其中包含项目列表。如果84是该项目的编号，则单击其中一个项目将把它们带到/ project / 84。当他们被路由到该URL时，有一个＆lt; select＆gt;带有项目列表（也列在/ home上）。这是应该发生的事情： 1）＆lt; select＆gt;应该具有等于所选项目名称的值。例如，如果项目84被称为项目84，它应该已经显示在＆lt; select＆gt;中。即使在它之前和之后还有20个其他项目。 2）当用户选择新的＆lt;选项＆gt;在＆lt; select＆gt;中，它应该自动向服务器发送GET以检索他们选择的项目的信息。所以这是我到目前为止所拥有的： import _ from＆＃39; lodash＆＃39 ;; 导入React，{Component}来自＆＃39;反应＆＃39 ;; 从＆＃39; react-redux＆＃39;中导入{connect}; class SelectProject extends Component { getProject（）{ // console.log（＆＃39; Working＆＃39;）; this.setState（{ value：event.target.value }）; } renderCurrentProjectName（）{ const {project_list} = this.props; if（！Project_list）{ return＆lt; div＆gt;正在加载...＆lt; / div＆gt ;; } return _（this.props.Project_list） .filter（c =＆gt; c.project_id == this.props.Project_id） .MAP（＆＃39;项目＆＃39;）。值（）; } renderProjectSelect（）{ return _.map（this.props.project_list，s =＆gt; { 回来（＆lt; option key = {s.project_id}＆gt; {s.project}＆lt; / option＆gt; ）; }）; } render（）{ 回来（＆lt; div className =＆＃39;面板 - 默认＆＃39;＆gt; ＆lt; div className =＆＃39; panel-heading＆＃39;＆gt; ＆LT; H4＆GT;＆LT;强＆GT; {this.renderCurrentProjectName（）}＆LT; /强＆GT;＆LT; / H4＆GT; ＆LT; / DIV＆GT; ＆lt; div className =＆＃39; panel-body＆＃39;＆gt; ＆lt; select className =＆＃39; form-control＆＃39; onChange = {this.getProject（）} value = {this.renderCurrentProjectName（）}＆gt; {this.renderProjectSelect（）} ＆LT; /选择＆GT; ＆LT; / DIV＆GT; ＆LT; / DIV＆GT; ）; } } function mapStateToProps（state）{ 返回{ project_id：state.documents.project_id， project_list：state.documents.project_list } } export default connect（mapStateToProps，null）（SelectProject）; 这只会产生1000个错误：在现有状态转换期间无法更新（例如在＆＃39;渲染＆＃39;或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数;构造函数副作用是反模式，但可以移动到＆＃39; componentWillMount＆＃39;。这是由this.setState（{value：even.target.value}）引起的，所以当我删除它时我得到：警告：失败的形式propType：你提供了一个＆＃39;值＆＃39;支持表单字段没有＆＃39; onChange＆＃39;处理程序。这将呈现一个只读字段。如果字段应该是可变的，请使用“defaultValue＆＃39;”。否则，请设置＆＃39; onChange＆＃39;或者只读#Only＆＃39;。检查＆＃39; SelectProduct＆＃39;的渲染方法。虽然通过在＆lt; select＆gt;中选择项目名称，但这确实可以实现1）。但是，你不能选择任何其他东西（甚至没有发送GET）。 defaultValue似乎没有做任何事情，至少它没有选择正确的＆lt;选项＆gt;。还执行了以下操作，导致相同的错误和行为（即，它选择了正确的＆lt;选项＆gt;，但赢了，让你选择其他任何东西）： ... class SelectProject extends Component { 构造函数（道具）{ 超级（道具）; this.state = { value：this.renderCurrentProductName（） }; } getProject（）{ // console.log（＆＃39; Working＆＃39;）; this.setState（{ value：event.target.value }）; } ... ＆lt; select className =＆＃39; form-control＆＃39; onChange = {this.getProject（）} value = {this.state.value}＆gt; {this.renderProjectSelect（）} ＆LT; /选择＆GT; ... 这些是我引用的一些SO问题。使用React JS进行下拉的OnChange事件 ReactJS：在没有onChange事件的情况下从props中选择默认值？

Answer 1

你能说出为什么要在改变时调用这些功能吗？你能尝试将事件传递给函数：

class SelectProject extends Component {

constructor(props) {
    super(props);

    this.state = {
        value: this.renderCurrentProductName()
    };
}

getProject(event) {
    // console.log('Working');
    this.setState({ 
        value: event.target.value
    });
}

            ...
                <select className='form-control' onChange={this.getProject} value={this.state.value}>
                    {this.renderProjectSelect}
                </select>
            ...

Answer 2

    const getProject = (event)=> {
    this.setState({ 
        value: event.target.value
    });
}

所以尝试传递事件onChange，你没有将事件作为参数传递，所以没有什么可以调用target.value

在React-Redux中更改<select>的选择时的默认选择和重新路由

2 个答案: