当需要处理多个受控输入元素时，可以向每个元素添加一个name属性，并让处理程序函数根据event.target.name的值选择要做什么。

例如:

inputChangeHandler（event） { this.setState（{ [event.target.name]： event.target.value }）; }

可以使用扩展语法，像这样:

inputChangeHandler : function (event) {
    this.setState( { 
        ...this.state,
        [event.target.id]: event.target.value
    } );
},

请试试这个。

这里以国家为例

 this.state = {
            name: '',
            surname: '',
            username: '',
            email: '',
  }

Onchange函数在这里。

onChangeData = (type, event) => {
    const stateData = this.state;
    if (event === "" || event === "Seçiniz")
        stateData[type] = undefined
    else
        stateData[type] = event

    this.setState({ stateData});
}

感谢@Cory的提示，我用了这个:

inputChangeHandler : function (event) {
    var stateObject = function() {
      returnObj = {};
      returnObj[this.target.id] = this.target.value;
         return returnObj;
    }.bind(event)();

    this.setState( stateObject );    
},

如果使用ES6或Babel transpiler转换你的JSX代码，你也可以通过计算属性名来完成:

inputChangeHandler : function (event) {
    this.setState({ [event.target.id]: event.target.value });
    // alternatively using template strings for strings
    // this.setState({ [`key${event.target.id}`]: event.target.value });
}

你的状态与字典更新一些键而不丢失其他值

state = 
{   
    name:"mjpatel"  
    parsedFilter:
    {
      page:2,
      perPage:4,
      totalPages: 50,
    }
}

解决方案如下

 let { parsedFilter } = this.state
 this.setState({
      parsedFilter: {
        ...this.state.parsedFilter,
        page: 5
      }
  });

这里更新键“page”的值为5

我是怎么做到的…

inputChangeHandler: function(event) {
  var key = event.target.id
  var val = event.target.value
  var obj  = {}
  obj[key] = val
  this.setState(obj)
},