相关疑难解决方法(0)

我从React.js开始,我想做一个简单的表单,但在文档中我找到了两种方法.

在第一种是使用参考文献:

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    // TODO: send request to the server
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

和第二个是使用状态的阵营部件内部:

var TodoTextInput = …

我正在使用反应选择包并使用自定义选项数组来填充数据（即自定义标签等）

我已经看到了一些解决方案，他们没有使用选项道具来设置值，或者只是使用默认数组模式来填充数据并设置值并获取它onChange，但是在我的情况下我无法获取值：

• 如果我设置value属性，它不会让我选择选项

• 如果我传递相同的(option) => option.phaseText) onChange，它将以字符串形式返回

  const HandelChange = (obj) => {
      console.log(obj);
  };
  const [dataPhase, setDataPhase] = useState([
      { phaseID: 1, phaseText: "Item 1" },
      { phaseID: 2, phaseText: "Item 2" },
      { phaseID: 3, phaseText: "Item 3" },
      { phaseID: 4, phaseText: "Item 4" },
      { phaseID: 5, phaseText: "Item 5" },
  ]);
  
  <Select
     isSearchable
      options={dataPhase}
      getOptionLabel={(option) => option.phaseText}
      getOptionValue={(option) => option.phaseText}
      className="diMultiSelect"
      classNamePrefix="diSelect"
      styles={styles}
      maxMenuHeight={150}
      value={(option) => …

  Run Code Online (Sandbox Code Playgroud)