时间戳

首页 > 解决方案 > 使用元素的子文本来设置/更新变量

javascript - 使用元素的子文本来设置/更新变量

问题描述

有谁知道我可以对<li>以下组件中的元素做什么，以便单击其中一个<li>元素会将 activityType 设置为该特定元素中包含的文本<li>？例如，第一个<li>是“教育”。单击那个，我希望发生这种情况：setActivityType('education')。

有谁知道我可以<li>对以下组件中的元素做些什么，以便单击其中一个<li>s 将设置activityType为包含在特定内容中的文本<li>？例如，第一个<li>是“教育”。单击那个，我希望发生这种情况：setActivityType('education')

类型菜单.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 调用。使用下面的代码，我离解决这个问题又近了一步，但我仍然无法按activityType原样控制/更新代码。该 const 以空字符串的形式返回，这导致我的 API 调用被关闭。有什么建议么？

类型菜单.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);

标签： javascriptreactjsonclickuse-state

解决方案

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

像这样的东西：

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仍然是之前的值。

推荐阅读