React - метод handleChange не запускается, поэтому имя выбранной опции не обновляется - PullRequest
Новая
       9

React - метод handleChange не запускается, поэтому имя выбранной опции не обновляется

0 голосов
/ 24 января 2019

У меня есть компонент <Select> из act-select , который отображает пару параметров в раскрывающемся меню, эти параметры извлекаются из вызова API, сопоставляются и отображаются имена.Когда я выбираю опцию из выпадающего списка, выбранное имя не появляется в поле.Кажется, что мой handleChange метод не запускается, и здесь я обновляю значение имени схемы: 

  handleChange = value => {
    // this is going to call setFieldValue and manually update values.dataSchemas
    this.props.onChange("schemas", value);

Это не обновляет значение, отображаемое в раскрывающемся списке после выбора чего-либо.

Я не уверен, передаю ли я правильную вещь в value пропеллер внутри самого компонента 

   class MySelect extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          schemas: [],
          fields: [],
          selectorField: ""
        };

        this.handleChange = this.handleChange.bind(this);
      }

      componentDidMount() {
        axios.get("/dataschemas").then(response => {
          this.setState({
            schemas: response.data.data
          });
          console.log(this.state.schemas);
        });
      }

      handleChange = value => {
        // this is going to call setFieldValue and manually update values.dataSchemas
        this.props.onChange("schemas", value);
        const schema = this.state.schemas.find(
          schema => schema.name === value.target.value
        );
        if (schema) {
          axios.get("/dataschemas/2147483602").then(response => {
            this.setState({
              fields: response.data.fields
            });
            console.log(this.state.fields);
          });
        }
      };

      updateSelectorField = e => {
        this.setState({ selectorField: e.target.value });
      };

      handleBlur = () => {
        // this is going to call setFieldTouched and manually update touched.dataSchemas
        this.props.onBlur("schemas", true);
      };

      render() {
        return (
          <div style={{ margin: "1rem 0" }}>
            <label htmlFor="color">
              DataSchemas -- triggers the handle change api call - (select 1){" "}
            </label>
            <Select
              id="color"
              options={this.state.schemas}
              isMulti={false}
              value={this.state.schemas.find(
                ({ name }) => name === this.state.name
              )}
              getOptionLabel={({ name }) => name}
              onChange={this.handleChange}
              onBlur={this.handleBlur}
            />
            {!!this.props.error && this.props.touched && (
              <div style={{ color: "red", marginTop: ".5rem" }}>
                {this.props.error}
              </div>
            )}
          </div>
        );
      }
    }

Я связал пример , показывающий эту проблему.

1 Ответ

0 голосов
/ 24 января 2019

В вашей функции handleChange вы пытаетесь получить доступ к value.target.value.Если вы укажете console.log (значение) в верхней части функции, вы получите: 

{
    id: "2147483603"
    selfUri: "/dataschemas/2147483603"
    name: "Book Data"
}

Это значение, с которым вызывается handChange.Используйте value.name вместо value.target.value.

...