如何在React.js的表格组件内将输入框替换为带自定义选项的下拉选择框？

你写的下拉框未生效核心是缺少和组件state联动的绑定属性，按照以下步骤修改即可： #

1. 先补全handleChange更新逻辑（如果你的组件内还未定义该方法） #

该方法会根据表单元素的name属性自动更新对应state字段，对input和select都通用，完整修改后的组件代码如下：

var ListItem = React.createClass({ 
  displayName: "ListItem",
  getInitialState: function () {
    return {
      fruit: this.props.value.product.fruit, 
      meat: this.props.value.product.meat, 
      vegetable: this.props.value.product.vegetable, 
      total: 0 
    };
  },
  // 确认组件内存在该更新方法，没有的话补充上
  handleChange: function(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  },
  // 修改后的render方法，替换input为select
  render: function () {
    return (
      React.createElement("tr", null, 
        // fruit字段替换为对应选项的下拉框
        React.createElement("td", null, 
          React.createElement("select", { 
            name: "fruit", 
            value: this.state.fruit, 
            onChange: this.handleChange 
          },
            React.createElement("option", {value: "apple"}, "apple"),
            React.createElement("option", {value: "banana"}, "banana"),
            React.createElement("option", {value: "strawberry"}, "strawberry")
          )
        ), 
        // meat字段替换为对应选项的下拉框
        React.createElement("td", null, 
          React.createElement("select", { 
            name: "meat", 
            value: this.state.meat, 
            onChange: this.handleChange 
          },
            React.createElement("option", {value: "pork"}, "pork"),
            React.createElement("option", {value: "beef"}, "beef"),
            React.createElement("option", {value: "lamb"}, "lamb")
          )
        ), 
        // vegetable字段替换为对应选项的下拉框，选项可按需调整
        React.createElement("td", null, 
          React.createElement("select", { 
            name: "vegetable", 
            value: this.state.vegetable, 
            onChange: this.handleChange 
          },
            React.createElement("option", {value: "carrot"}, "carrot"),
            React.createElement("option", {value: "cabbage"}, "cabbage"),
            React.createElement("option", {value: "spinach"}, "spinach")
          )
        ), 
        React.createElement("td", { className: "total" }, this.state.total)
      )
    );
  }
})

关键修改说明 #

• 每个select组件必须绑定value属性和当前state对应字段关联，保证下拉框为受控组件，显示值和state同步
• 保留和原来input一致的name属性和onChange绑定，不需要修改原有状态更新逻辑即可兼容
• 若需要添加默认空选项，可在对应select的子元素最前面加React.createElement("option", {value: ""}, "请选择")

内容的提问来源于stack exchange，提问作者azububu