使用元素的子文本 set/update 变量

Question

有谁知道我可以对以下组件中的 <li> 元素做什么，以便单击 <li> 元素之一会将 activityType 设置为该特定 [=13= 中包含的文本]？例如，第一个 <li> 是 "Education." 点击那个，我希望这样发生：setActivityType('education').

有谁知道我可以对以下组件中的 <li> 元素做些什么，以便单击其中一个 <li> 会将 activityType 设置为包含在特别<li>？例如，第一个 <li> 是 'Education.' 单击那个，我希望这样发生： setActivityType('education')

TypeMenu.js:

import React, { useState } from "react";

const TypeMenu = () => {
    const [activityType, setActivityType] = useState('');

    return (
        <div>
            <h2>Please select an activity type:</h2>
            <ul>
                <li>Education</li>
                <li>Recreational</li>
                <li>Social</li>
                <li>DIY</li>
                <li>Charity</li>
                <li>Cooking</li>
                <li>Relaxation</li>
                <li>Music</li>
                <li>Busywork</li>
            </ul>
        </div>
    )
}

export default TypeMenu;

更新：

我接受了给出的建议，并将每个 <li> 元素的子文本放在一个数组中。然后我映射到该数组，以创建单独的 <li>，给每个人一个 onClick，理想情况下，将 activityType 设置为我单击的 <li> 中的文本。然后我想根据动态设置的 activityType 进行 API 调用。使用下面的代码，我离解决这个问题又近了一步，但我仍然无法 control/update activityType 按原样使用代码。该 const 返回为空字符串，这使我的 API 调用中断。有什么建议吗？

TypeMenu.js:

import React, { useState } from "react";
import { connect } from "react-redux";

import { getActivityByType } from "../actions";

const TypeMenu = props => {
    const [activityType, setActivityType] = useState('');

    const activityArr = [
        'Education',
        'Recreational',
        'Social',
        'DIY',
        'Charity',
        'Cooking',
        'Relaxation',
        'Music',
        'Busywork'
    ];

    const returnActivity = (t) => {
        setActivityType(t.toLowerCase());
        props.getActivityByType(activityType);
    }

    console.log(activityType);

    return (
        <div>
            <h2>Please select an activity type:</h2>
            <ul>
                {activityArr.map(type => (
                    <li key={type} onClick={() => returnActivity(type)}>{type}</li>
                ))}
            </ul>
        </div>
    )
}

export default connect(null, { getActivityByType })(TypeMenu);

Answer 1

为每个列表项提供一个设置 activity 类型的 onClick 函数。我还会将您的 activity 类型存储在一个数组中，并将每个类型映射到一个列表项，而不是将它们单独写出来。

像这样：

const activityTypes = [
  'Education',
  'Recreational',
  ... // etc
]

const TypeMenu = () => {
  const [activityType, setActivityType] = useState('');

  return (
    <div>
      <h2>Please select an activity type:</h2>
      <ul>
        {activityTypes.map(t => (
          <li onClick={() => setActivityType(t)}>{t}</li>
         ))}
      </ul>
    </div>
  )
}

更新：

将 props.getActivityByType(activityType) 更改为 props.getActivityByType(t)。状态直到下一次渲染才会改变，所以 activityType 的值仍然是之前的值。

使用元素的子文本 set/update 变量

using child text of an element to set/update a variable

javascript

onclick

reactjs

use-state