如何使用 onChange 事件将对象值传递给 select 标签？

Question

我有这个反应代码，它抓取用户输入的文本的一部分，并创建 JSON 对象作为选择标签的选项。这里 textContent 来自具有用户输入的 fileReader，而 handleChange 与表相关。我收到此错误：

TypeError: _this6.state.textContent.match 不是函数

当我 console.log JSON.stringify(this.state.textContent.match(/[A-Z]+:[0-9]{1,3}/gm)) 我得到这个对象 ["A:100","B:300","C:400","D:900","E:800"] 这是正确的，但我不能将它作为选项传递。谁能帮忙？

class AllForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      textContent: ""
    };
  }

  handleChanges = idx => e => {
    const { name, value } = e.target;
    const rows = [...this.state.rows];
    rows[idx] = {
      [name]: value
    };
  };

  render() {
    return (
      <Select
        name={"BIN"}
        placeholder={"choose the value"}
        options={JSON.stringify(
          this.state.textContent.match(/[A-Z]+:[0-9]{1,3}/gm)
        )}
        controlFunc={this.handleChanges(idx)}
      />
    );
  }
}

选择组件是：

import React from "react";
import PropTypes from "prop-types";

const Select = props => (
  <div className="form-group">
    <select
      name={props.name}
      value={props.selectedOption}
      onChange={props.controlFunc}
      className="form-select"
    >
      <option value="">{props.placeholder}</option>
      {props.options.map(opt => {
        return (
          <option key={opt} value={opt}>
            {opt}
          </option>
        );
      })}
    </select>
  </div>
);

Select.propTypes = {
  title: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  options: PropTypes.array.isRequired,
  selectedOption: PropTypes.string,
  controlFunc: PropTypes.func.isRequired,
  placeholder: PropTypes.string
};

export default Select;

Answer 1

我不确定这就是你想要的（缺乏正则表达式的知识），但这里是工作代码。唯一的问题是这里的JSON.stringify。你从你的.match得到一个数组，你为什么用JSON.stringify？

class AllForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      textContent: "A:100B:300C:400D:900E:800",
    };
  }

  handleChanges = idx => e => {
    const { name, value } = e.target;
    const rows = [...this.state.rows];
    rows[idx] = {
      [name]: value
    };
  };

  render() {
    return (
      <Select
        name={"BIN"}
        placeholder={"choose the value"}
        options={
          this.state.textContent.match(/[A-Z]+:[0-9]{1,3}/gm)
        }
        //controlFunc={this.handleChanges(idx)}
      />
    );
  }
}

const Select = props => (
  <div className="form-group">
    <select
      name={props.name}
      value={props.selectedOption}
      onChange={props.controlFunc}
      className="form-select"
    >
      <option value="">{props.placeholder}</option>
      {props.options && props.options.map(opt => {
        return (
          <option key={opt} value={opt}>
            {opt}
          </option>
        );
      })}
    </select>
  </div>
);

ReactDOM.render(<AllForm />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>