ReactJS：表格行中的下拉列表

问题描述

我正在尝试创建表，其中的一行包含“选定的选项”，如下所示：

通过单击下拉列表，用户有机会在2个选项之间进行选择：支出和收入。选择之后，所选选项将呈现在单元格中，数据所选值将以组件状态存储（例如，可以发送到服务器端）。

请输入我的代码：

第一个父组件：

class Table extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        data: [
            {'Date': '','Operation': '','Amount': '','Item_of_expenditure': '','Balance': ''}
        ]
    };
    this.getHeader = this.getHeader.bind(this);
    this.getRowsData = this.getRowsData.bind(this);
    this.getKeys = this.getKeys.bind(this);
    this.addRow = this.addRow.bind(this);
    this.setoperation = this.setoperation.bind(this);
}

getKeys = function () {
    return Object.keys(this.state.data[0]);
};

getHeader = function () {
    var keys = this.getKeys();
    return keys.map((key) => {
        return <th key={key}>{key.toLowerCase()}</th>
    })
};

getRowsData = () => {
    var items = this.state.data;
    var keys = this.getKeys();
    return items.map((row,index) => {
        return <tr key={index}><RenderRow key={index} data={row} keys={keys} onSelectedOperation={this.setoperation(index,option)}/></tr>
    })
};

setoperation = (index,option) => {
    let existRow = this.state.data[index];
    let operation = existRow.Operation;
    operation.set(option);
    existRow.set(operation);
    this.setState({data: existRow});
};

addRow = function () {
    let existRows = this.state.data;
    existRows.push({'Date': '','Balance': ''});
    this.setState({data: existRows});
};

render() {
    return (
        <div className={styles}>
            <table>
                <thead>
                <tr>{this.getHeader()}</tr>
                </thead>
                <tbody>
                {this.getRowsData()}
                </tbody>
                <button onClick={this.addRow}>
                    Add new row
                </button>
            </table>
        </div>
    );
  }
}

ReactDOM.render(
    <Table/>,document.getElementById("app")
);

第二个组件，在“ getRowsData”中用于呈现每一行：

class RenderRow extends React.Component {
constructor(props) {
    super(props);
    this.handleOperation = this.handleOperation.bind(this);
}

handleOperation = (selectedOperation) => {
    this.props.onSelectedOperation(selectedOperation);
};

render() {
    return this.props.keys.map((key) => {
        var rowValue;
        if (key === 'Operation') {
            rowValue = <OperationSelect onSelectOperation={this.handleOperation}/>
        } else {
            rowValue = this.props.data[key]
        }
        return <td key={this.props.data[key]}>{rowValue}</td>
    })
   }
 }

第三部分（用于下拉列表）：

class OperationSelect extends React.Component {
constructor(props) {
    super(props);
    this.state = {value: 'expenditure'};
    this.handleChange = this.handleChange.bind(this);
}

handleChange =(event) => {
    this.setState({value: event.target.value});
    this.props.onSelectOperation(event.target.value);
};

render() {
    return (
        <label>
            <select value={this.state.value} onChange={this.handleChange}>
                <option value="expenditure">Expenditure</option>
                <option value="revenue">Revenue</option>
            </select>
        </label>
    );
  }
}

预期的行为，再过一次：当用户单击下拉列表中的选项时，选定的值：

在表格单元格中呈现（按默认-“支出”）；
保存在state.data.Table组件的操作中。因此，默认值为：“数据：[{'日期'：''，'操作'：''，'金额'：''，'Item_of_expenditure'：''，'余额'：''}]]”。更改后的期望值是-“数据：[{'日期'：''，'操作'：'收入'，'金额'：''，'Item_of_expenditure'：''，'余额'：''}]” / p>

为此，我尝试将子组件“ OperationSelect”中的选定值发送给父组件“ Table”。但是，当我在dpordown列表中选择选项时，我遇到了2个问题：

然后-IDEA用波浪线在“下划线”和“ onSelectOperation”下划线：

handleOperation = (selectedOperation) => {
    this.props.onSelectedOperation(selectedOperation);
};

和：

handleChange =(event) => {
    this.setState({value: event.target.value});
    this.props.onSelectOperation(event.target.value);
};

IDEA将此道具视为...一种功能。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

reactjs reactjs