Добавление нового значения в CreatableSelect onClick в кнопке для React-Select - PullRequest
Новая
       9

Добавление нового значения в CreatableSelect onClick в кнопке для React-Select

0 голосов
/ 01 ноября 2018

Я пытаюсь воспроизвести что-то похожее на предлагаемые теги SO, где предлагаемые теги добавляются на панель ввода по щелчку. Однако, похоже, что CreatableSelect не инициализирует обновленные значения в реквизитах value. Я что-то не так делаю?

Вот мои коды и поле для удобства.

index.js 

   import React from "react";
    import { render } from "react-dom";
    
    import Suggestion from "./Suggestion";
    import Form from "./Form";
    
    class App extends React.Component {
      state = {
        options: [
          { value: "Chocolate", label: "Chocolate" },
          { value: "Strawberry", label: "Strawberry" },
          { value: "Vanilla", label: "Vanilla" }
        ],
        stack: [{ value: "Bananna", label: "Bananna" }]
      };
    
      // Issue here!
      // Adding "Mango" into the stack. Option does not show up in the select panel
      addToStack = name => {
        const { stack } = this.state;
        const length = Object.keys(stack).length;
        stack[length] = { value: name, label: name };
        this.setState({ stack: stack }, () => {
          console.log("addToStack", stack);
        });
      };
    
  // Replacing new array from Selectable. Option shows up in the sekect panel
  replaceStack = arr => {
    var { stack } = this.state;
    stack = arr;
    this.setState({ stack: stack }, () => {
      console.log("replaceStack", stack);
    });
  };

  render() {
    const { options, stack } = this.state;
    return (
      <div>
        <Form
          stack={stack}
          options={options}
          replaceStack={this.replaceStack}
        />
        <br />
        <Suggestion addToStack={this.addToStack} />
      </div>
    );
  }
}

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

Suggestion.js 

import React from "react";
    
    class Suggestion extends React.Component {
      // Adds "Mango" by default
      handleClick = () => {
        this.props.addToStack("Mango");
      };
    
      render() {
        return (
          <div>
            <button onClick={this.handleClick}>
              Add "Mango" into Select Panel
            </button>
          </div>
        );
      }
    }
    
    export default Suggestion;

Form.js 

    import React from "react";
    import CreatableSelect from "react-select/lib/Creatable";
    
    class Form extends React.Component {
      handleChange = (arr, action) => {
        this.props.replaceStack(arr);
      };
    
      render() {
        return (
          <div>
            <CreatableSelect
              isMulti
              onChange={this.handleChange}
              options={this.props.options}
              value={this.props.stack}
            />
          </div>
        );
      }
    }
    
    export default Form;

1 Ответ

0 голосов
/ 23 января 2019 
Here you go with the solution :

https://codesandbox.io/s/w695qx2q7w

   addToStack = name => {
    console.log("addToStack", name);
    const { stack, options } = this.state;
    const newstack = { value: name, label: name };
    this.setState(
      { stack: [...stack, newstack], options: [...options, newstack] },
     () => {
       console.log("addToStack", this.state.stack);
       console.log("options", this.state.options);
    }
  )};
...