Question

解释起来有点复杂，但简而言之，我想尝试结合：

我将Select组件放在Control中：

                    <Control model=".month" component={CustomSelectComponent}
                        floatingLabelText="Month" /> <br />

CustomSelectComponent的位置：

import React, { Component } from 'react'    
import SelectField from 'material-ui/SelectField'
import MenuItem from 'material-ui/MenuItem'

class CustomSelectComponent extends Component {

    months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

    state = {
        value: ""
    };

    handleChange = (event, index, value) => {
        this.setState({ value });
        this.props.onChange(value);
    }

    render = () => {
        return (
            <SelectField
                floatingLabelText={this.props.floatingLabelText}
                value={this.state.value}
                onChange={this.handleChange}
            >
                {this.months.map(m => <MenuItem key={m} value={m} primaryText={m} />)}
            </SelectField>
        )
    }
}

export default CustomSelectComponent;

现在的问题是，当使用表单进行编辑操作时，模型具有月份的值，但它不会反映在视图中。选择组件似乎未填充。

关于此反应还原形式的文档有一个现场解释/警告。（在this page上，滚动到“模型和查看值”）

但是使用的示例不是受控组件。

所以我想问题是：

如何将viewModel映射到受控组件中的值？

我希望很清楚，谢谢你的帮助。

如何使用受控组件作为反应 - 还原形式的控制？

0 个答案: