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>

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

1 个答案: