В случае 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;
    },
0
ssss 30 Авг 2017 в 21:20

3 ответа

Лучший ответ

Это потому, что ваш 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;
}
2
Shubham Khatri 30 Авг 2017 в 18:23

Похоже, что вы изменяете неправильные значения, также убедитесь, что проверенное свойство сравнивается с правильным значением. Попробуй это:

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 ;
},
0
Crysfel 30 Авг 2017 в 19:49

Попробуйте onchange вместо onChange.

0
David Alves 30 Авг 2017 в 18:24