как создать функцию, которая имеет функцию в качестве одного из аргументов реагировать - PullRequest
Новая
       4

как создать функцию, которая имеет функцию в качестве одного из аргументов реагировать

0 голосов
/ 02 августа 2020

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

const [teamName, setTeamName] = useState('')
const [teamLocation, setTeamLocation] = useState('')

    <div classname="editHere">
    <input value={teamName} onChange={(e) => {  setTeamName(e.target.value) }}/>
    </div>

    <div className="editHere">
    <input value={teamLocation} onChange={(e) => {  setTeamLocation(e.target.value) }}/>
    </div>

Я пытаюсь сделать это с помощью следующей функции 

function dropDownRow(value, setValue()) {
        return (
            <div className="editHere">
            <input value={value} onChange={(e) => {  setValue(e.target.value) }}/>
            </div>
        )

    }

, а затем вернуть то, что показано в первом фрагмент, который я хотел ввести 

{dropDownRow(teamName, setTeamName())}
{dropDownRow(teamLocation, setTeamLocation())}

Очевидно, это не работает, поэтому есть ли у кого-нибудь предложения о том, как я могу сделать то, что пытаюсь достичь?

Ответы [ 2 ]

1 голос
/ 02 августа 2020

Создайте свою функцию вот так ... 

function DropDownRow({ value, setValue }) {
  return (
    <div className="editHere">
      <input value={value} onChange={e => setValue(e.target.value)} />
    </div>
  );
}

, и ваши ссылки должны выглядеть так ... 

      <DropDownRow value={teamName} setValue={setTeamName} />
      <DropDownRow value={teamLocation} setValue={setTeamLocation} />

Пример здесь ...

0 голосов
/ 02 августа 2020

Убрать скобки здесь: 

function dropDownRow(value, setValue) {

А здесь: 

{dropDownRow(teamName, setTeamName)}
{dropDownRow(teamLocation, setTeamLocation)}

или вы также можете использовать более чистый синтаксис: 

const DropDownRow = ({ value, setValue }) => ...

затем 

<DropDownRow value={teamName} setValue={setTeamName} />
<DropDownRow value={teamLocation} setValue={setTeamLocation} />
...