时间戳

首页 > 解决方案 > 在 ReactJs 中单击时添加新选项

reactjs - 在 ReactJs 中单击时添加新选项

问题描述

我正在做一个React search用户可以添加多个过滤器的地方。这个想法是，起初只有一个过滤器（选择和输入字段），如果用户希望添加更多，他可以再添加一行（选择和输入），它也会考虑到这一点。

我无法弄清楚如何添加更多行（选择，输入）以及如何读取它们的数据作为列表大小并且一切都可以改变。

所以我在选择数组中有多个选项：

const options = [
  { label: "foo", value: 1 },
  { label: "bar", value: 2 },
  { label: "bin", value: 3 }
];

现在，如果用户从框中选择第一个值Select，然后在input框中键入文本，我将得到他们的值，我可以根据它进行搜索。

const options = [
  { label: "foo", value: 1 },
  { label: "bar", value: 2 },
  { label: "bin", value: 3 }
];

class App extends React.Component {
  state = {
    selectedOption: null,
    textValue: null
  };
  handleOptionChange = selectedOption => {
    this.setState({ selectedOption: selectedOption.value });
  };
  handleTextChange = event => {
    this.setState({ textValue: event.target.value });
  };
  handleSubmit = () => {
    console.log(
      "SelectedOption: " +
        this.state.selectedOption +
        ", textValue: " +
        this.state.textValue
    );
  };
  addNewRow = () => {
    console.log("adding new row of filters");
  };
  render() {
    const { selectedOption } = this.state;

    return (
      <div>
        <div style={{ display: "flex" }}>
          <Select
            value={selectedOption}
            onChange={this.handleOptionChange}
            options={options}
          />
          <input
            type="text"
            value={this.state.textValue}
            onChange={this.handleTextChange}
          />
        </div>
        <button onClick={this.addNewRow}>AddNewRow</button>
        <button onClick={this.handleSubmit}>Submit</button>
      </div>
    );
  }
}

export default App;

我还为此创建了一个CodeSandBox。

如果用户单击addNewRow新行，则应该出现新行，并且应该可以选择前一个（搜索、输入）而不选择先前选择的行。

我什至不知道我应该如何处理这个问题。

标签： reactjsselectbuttoninput

解决方案

要在单击按钮时添加新的输入行，您需要将新的输入项添加到输入列表中，如下所示：

import React, { Component } from 'react'
import Select from "react-select";

const options = [
    { label: "foo", value: 1 },
    { label: "bar", value: 2 },
    { label: "bin", value: 3 }
];

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { inputGroups: ['input-0'] };
    }
    handleSubmit = () => {
        console.log("form submitted");
    };

    AddNewRow() {
        var newInput = `input-${this.state.inputGroups.length}`;
        this.setState(prevState => ({ inputGroups: prevState.inputGroups.concat([newInput]) }));
    }

    render() {
        return (
            <div>
                <div>
                    <div>
                        {this.state.inputGroups.map(input =>
                            <div key={input} style={{ display: "flex" }}>
                                <Select
                                    options={options}
                                />
                                <input
                                    type="text"
                                // value={this.state.textValue}
                                // onChange={this.handleTextChange}
                                />
                            </div>
                        )}
                    </div>
                </div>
                <button onClick={() => this.AddNewRow()}>AddNewRow</button>
                <button onClick={this.handleSubmit()}>Submit</button>
            </div>
        );
    }
}

export default App;

单击“AddNewRow”按钮后，它将为您添加新的输入组。现在您需要将此 inputGroup 包装在“表单”中，以便在单击提交时获取每个 inputGroup 的数据。

我希望它能解决你的问题。

推荐阅读