Как я могу обновить поле, изменив что-либо в теге "select" в реакции?

Question

Я довольно новичок в React, и я чувствую, что я близко, но, похоже, не могу понять это. Я хочу изменить значение некоторого текста в одном элементе (Поле), выбрав опцию в другом (Установить).

У меня есть 3 javascript файлов: «Приложение», «Поле» и «Установить». Вот код, который у меня есть:

Приложение выглядит так:

import React, { useState } from "react";
import Field from "./Field";
import Set from "./Set";

export default function App() {
  const [region, setRegion] = useState("all");

  function set_region(region) {
    setRegion(region);
  }

  return (
    <div className="App">
      <Set update={set_region} />
      <Field region={region} />
    </div>
  );
}

Поле выглядит так:

import React from "react";

export default function field({ region }) {
  return <p>{region}</p>;
}

И Set выглядит так:

import React from "react";

export default function Set(set_region) {
  function update() {
    set_region(this.value);
  }

  return (
    <div>
      <select onChange={update}>
        <option value="all">All</option>
        <option value="car">Carolinas</option>
        <option value="florida">Florida</option>
      </select>
    </div>
  );
}

Текущая ошибка гласит: «set_region не является функцией». Я знаю, что вы не можете этого сделать, но я просто хочу изобразить свою цель как можно лучше. После обновления useState с помощью выпадающего меню я хочу обновить текст поля до нового значения. Кроме того, this.value возвращает неопределенное значение, поэтому я не уверен, что использовать там. Нужно ли мне вообще использовать для этого состояние?

Заранее спасибо.

Answer 1

проблема здесь в том, что вы передаете Set функцию обновления в качестве реквизита, чтобы вы могли деструктурировать это свойство и вызывать его как <select onChange={update}>

, а затем в компоненте APP вам необходимо получить событие, так что вы можете изменить его, как

  function set_region(e) {
    setRegion(e.target.value);
  }

Я настроил CodeSandbox, чтобы вы могли играть

https://codesandbox.io/s/vigilant-heyrovsky-c9uy4?file= / SRC / App. js

также я рекомендую передать функцию setRegion из useState вместо создания новой: D

Answer 2

Вы используете select неверным образом.

Используйте npm для установки реакции-выбора.

import Select from 'react-select';
const [region, setRegion] = useState("all");
const regions= [
    {
        'value':'value 1',
        'label':'value 1',
    },
    {
        'value':'value 2',
        'label':'value 2',
    }
]
const update= (_selectedOption) => {
  set_region(_selectedOption)
}


 return (
    <div>
       <Select
          placeholder='Select Region'
          value={region}
          onChange={update}
          options={regions}
        />
    </div>
  );