Question

对于input案例，我无法删除和/或添加任何字符。我看到单选按钮的值在console.log中更改，但在视觉上没有。我不确定为什么它会这样表现。

handleChange: function(e) {
        switch (e.target.name) {
        case 'name':
            this.setState({newName: e.target.value}); break;
        case 'type':
            this.setState({newType: e.target.value}); break;
}

nameFormatter: function(id, name) {
        return (this.state.editEnabled && this.state.editId === id) ?
            <input type="text"
                value={name}
                name="name"
                maxLength="50"
                onChange={this.handleChange} /> : name;
    },

    typeFormatter: function(id, type) {
        type = type === 'blacklist' ? 'Blacklist' : 'Whitelist';
        return (this.state.editEnabled && this.state.editId === id) ?
            <div>
                <div><input type="radio"
                    name="ipsetType"
                    value="blacklist"
                    checked={type === 'Blacklist'}
                    onChange={this.handleChange} />&nbsp;Blacklist</div>
                <div><input
                    type="radio"
                    name="type"
                    value="whitelist"
                    checked={type === 'Whitelist'}
                    onChange={this.handleChange} />&nbsp;Whitelist</div>
            </div> : type;
    },

Answer 1

这是因为您的handleChange设置了newName和newType的状态，而您需要为name and type

设置状态

handleChange: function(e) {
        switch (e.target.name) {
        case 'name':
            this.setState({name: e.target.value}); break;
        case 'type':
            this.setState({type: e.target.value}); break;
}

Answer 2

尝试onchange而不是onChange。

Answer 3

似乎您正在更改错误的值，还要确保已检查的属性与正确的值进行比较。试试这个：

handleChange: function(e) {
        var values;

        switch (e.target.name) {
          case 'name':
            values = {name: e.target.value}; break;
          case 'type':
            values = {type: e.target.value}; break;
       }

       // Try to always have a single call to setState in your methods
       this.setState(values);
}

nameFormatter: function(id, name) {
        return (this.state.editEnabled && this.state.editId === id) ?
            <input type="text"
                value={name}
                name="name"
                maxLength="50"
                onChange={this.handleChange} /> : name;
},

typeFormatter: function(id, type) {
    // don't mutate the params
    //type = type === 'blacklist' ? 'Blacklist' : 'Whitelist';
    // instead create a new variable
    var label = type === 'blacklist' ? 'Blacklist' : 'Whitelist';
    return (this.state.editEnabled && this.state.editId === id) ?
        <div>
            <div><input type="radio"
                name="ipsetType"
                value="blacklist"
                checked={type === 'blacklist'}
                onChange={this.handleChange} />&nbsp;Blacklist</div>
            <div><input
                type="radio"
                name="type"
                value="whitelist"
                checked={type === 'whitelist'}
                onChange={this.handleChange} />&nbsp;Whitelist</div>
        </div> : label ;
},

onChange无法正常工作，但已在控制台中记录

3 个答案: