Question

这是使用反应。 问题简而言之，我在表单中有两个选择菜单（作为同一组件的一部分），我想选择一个来设置另一个选项。

一个选项显示月份，一个显示所选月份的天数。根据选择的月份，日期应显示该月份的正确数字（因此，如果在月份中选择“1月”，则选择31天，如果是“2月”则选择28天，等等。）

我无法获得响应select的更改的初始值。我可以记录正确的值，但实际出现的日期选择永远不会从其初始状态更新。

一些代码......

我触发：

<select defaultValue="Jan" onChange={() => { setMonthNumber(this.refs["month"]["value"]) }} ref="month">

setMonthNumber是一项行动：

export const setMonthNumber = (monthNumber) => {
   store.dispatch({type:'GUEST_INFORMATION_SET_MONTH', message:monthNumber});
}

处理该操作的reducer是：

const initialState = {
    currentMonth: "Jan"
};

const guestInformationEditReducer = (state = initialState, action) => {

    let localState = merge({}, state);

    switch (action.type) {
        case 'GUEST_INFORMATION_SET_MONTH':
            localState.currentMonth= action.message;
            return localState;
    }

    return state
};

export default guestInformationEditReducer;

我聚合了我的reducer并在我设置的文件中（省略了其他reducer）：

export default {
    guestInformationEditComponent: guestInformationEditReducer
}

然后在我的组件（名为GuestInformationEdit）中我用以下内容连接：

const getGuestInformationComponentProps = state => {
    return {
        month: state.guestInformationEditComponent.currentMonth
    }
}

export default connect(getGuestInformationComponentProps)(GuestInformationEdit);

在我的组件的render方法中，我使用：

访问该值

const days = this.getDaysFromMonth(this.props.month);

getDaysFromMonth只是一个构建jsx options集合的开关，如：

days.push(<option key={stringNum} value={stringNum}>{stringNum}</option>);

这样我最终会得到一个具有正确值的选项数组，具体取决于所选的月份。这一切都有效（日志记录显示正确的值）。我的问题......当我将{days}添加到我的jsx中时如此：

<select defaultValue="1">
    {days}
</select>

我只有31天，这是减速器中initialState设置的值。尽管我可能会尝试更改任何控制台日志，但它从未在视图中发生变化。为什么？我做错了什么/错过了什么？此外，所有这些对于这样的改变真的是必要的吗？对于这么简单的事情来说似乎很复杂。

**编辑

在我的组件中，我输出了选择：

 <BootstrapFormGroup model="guestModel.BirthMonth" classes="col-xs-12 col-md-1 extra-four-percent" formLabel="Birth Month">
    <select defaultValue="Jan" onChange={() => { setMonthNumber(this.refs["month"]["value"]) }} ref="month" className="form-control">
        <option value="Jan">Jan</option>
        <option value="Feb">Feb</option>
        <option value="March">March</option>
        <option value="April">April</option>
        <option value="May">May</option>
        <option value="June">June</option>
        <option value="July">July</option>
        <option value="Aug">Aug</option>
        <option value="Sept">Sept</option>
        <option value="Oct">Oct</option>
        <option value="Nov">Nov</option>
        <option value="Dec">Dec</option>
    </select>
</BootstrapFormGroup>
{days}
<BootstrapFormGroup model="guestModel.BirthDay" classes="col-xs-12 col-md-1 extra-four-percent" formLabel="Birth Day">
    <select defaultValue="1" className="form-control">
        {days}
    </select>
</BootstrapFormGroup>

查看{days}的这两个实例？使用上面的代码，第一个代码正确地更新以响应onchange的月份选择，第二个代码除了显示初始状态然后永远不会更新时什么都不做。

Reactjs：有一个选择菜单设置另一个

0 个答案: