reactjs - 如何使用material-ui与模型一起使用？

Question

我尝试使用 react 和 material-ui。使用此代码开发后：

'use strict';

var React   = require('react'),
ReactDOM    = require('react-dom'),
Router      = require('react-router'),
Icon        = require('react-fa'),
Firebase    = require('firebase'),
ReactFire   = require('reactfire'),
PeopleDao   = require('../../../common/dao'),
mui         = require('material-ui'),
IconButton  = mui.IconButton,
Checkbox    = mui.Checkbox,
TextArea    = mui.TextArea,
TextField   = mui.TextField,
SelectField = mui.SelectField;

require('./style');

module.exports = React.createClass({
    mixins: [Router.Navigation, Router.State, ReactFire],
    setApplicationDetails: function(pageData, item) {
        this.transitionTo('/people/view');
    },
    back: function() {
        event.preventDefault();
        this.transitionTo('/people/view');
    },
    save: function() {
        event.preventDefault();
        //console.log(self.getState());
        console.log(this.refs.txName.getValue());
    },
    getInitialState: function() {
        return {
            code: '',
            name: '',
            observation: '',
            genere: '0',
            active: true
        };
    },
    componentDidMount: function() {
        var self = this;
        var peopleId = this.props.params.peopleId ? parseInt(this.props.params.peopleId) : 0;
        var table = 'people';

        PeopleDao.findByCode(table, peopleId, function(object){
            self.setState(object.val());
        });
    },
    render: function() {
        var self = this;
        var peopleId = this.props.params.peopleId;

        return(
            <div className="editor">
                <TextField ref="txName" value={self.state.name} hintText="Nome" floatingLabelText="Nome" className="full-width"/><br/>
            </div>
        );
    }
});

当打开页面并编辑“Nome”字段时，此功能被禁用。我的错误是什么？

Answer 1

当您指定 avalue时，React 将该输入设为只读，除非您还添加了onChange回调，例如：

<TextField ref="txName" 
value={self.state.name} 
hintText="Nome" 
floatingLabelText="Nome" 
className="full-width"
onChange={(event) => {this.setState(name: event.target.value);}}
/>

React 文档中的更多信息：https ://facebook.github.io/react/docs/forms.html

Answer 2

我用链接解决这个问题：

<TextField value={self.state.code} hintText="Código" floatingLabelText="Código" className="full-width" disabled={true}/><br/>
<TextField valueLink={this.linkState('name')} hintText="Nome" floatingLabelText="Nome" className="full-width"/><br/>
<TextField valueLink={this.linkState('observation')} hintText="Observação" floatingLabelText="Observação" multiLine={true} className="full-width"/><br/>
<SelectField valueLink={this.linkState('genere')} hintText="Sexo" floatingLabelText="Sexo" menuItems={[
    {payload: 0, text: ''},
    {payload: 1, text: 'Masculino'},
    {payload: 2, text: 'Feminina'}
]}/><br/>
<Checkbox checkedLink={this.linkState('active')} label="Ativo?"/><br/>