使用带有 React.js 的按钮更改状态的问题答案

【问题标题】：Issues changing state using buttons with React.js使用带有 React.js 的按钮更改状态的问题
【发布时间】：2023-03-21 10:07:17
【问题描述】：

我正在尝试使用 onClick 侦听器更改 App.js 中的状态，该侦听器接收 DOM 元素的值以获取值。这将允许我更改 jsx 呈现给 DOM 的内容。这类似于更改网站上的页面，但是我希望这一切都在一个区域内完成。

然而，到目前为止，我一直得到一个未定义的 DOM 元素值。

我认为问题可能源于我如何编写函数或如何将其传递到导航栏组件中。

状态

 state = {
    page: 'Home'
  }

换页功能

 changePage = event => {
    const { name, value } = event.target;
    this.setState({
      page: value
    })
  }

它是如何传递到导航组件的

<Navbar changePage={this.changePage} value1={this.state.page} link1={"About"} link2={"Portfolio"} link3={"Contact"} />

导航组件


import React from 'react';

function Navbar(props) {

    return (
        <div className='row'>
            <h5 className='col s4 waves-effect center-align' name={props.link1} value={props.link1} onClick={(event) => props.changePage(event)}>{props.link1}</h5>
            <h5 className='col s4 waves-effect center-align' name={props.link2} value={props.link2} onClick={props.changePage}>{props.link2}</h5>
            <h5 className='col s4 waves-effect center-align' name={props.link3} value={props.link3} onClick={props.changePage}>{props.link3}</h5>
        </div>
    )
}

export default Navbar

当我单击导航组件中的第一个时，我希望使用我从父组件传递给它的函数，它将获取值并将状态更改为值。相反，我得到一个未定义的值。

【问题讨论】：

a h5 元素的值将是 innerText 我认为。但是，您应该只在回调本身中传递您想要的内容，而不是那样做。这样它就更明确了。 onClick={(e) => props.changePage(e, link1)} 这样您只需给出值，代码中的一个潜在错误可能是如果某些内容编辑了元素的 innerText，您的代码将无法工作。最好保持明确/更多指令:)

标签： reactjs

【解决方案1】：

来自https://www.w3schools.com/tags/att_value.asp

For <button>, <input> and <option> elements, the value attribute specifies the initial value of the element.

For <li> elements, the value attribute sets the value of the list item (for ordered lists). The next list items will increment from that value.

For <meter> elements, the value attribute specifies the current value of the gauge.

For <progress> elements, the value attribute specifies how much of the task has been completed.

For <param> elements, the value attribute specifies the value of the parameter.

对于<h> 标签，我相信value 不是一个适用的属性，因此你会得到“未定义”https://www.w3schools.com/tags/tag_hn.asp

您可以做的是以接受值的方式更新您的方法

 changePage = (value) => {
    this.setState({
      page: value
    })
  }

对于您的<h> 标签，您可以更新 onClick 方法，将值直接传递给它

onClick={() => props.changePage(props.link1)}

【讨论】：

【解决方案2】：

这可以使用一个按钮来包装你的标题，并执行函数而不是返回它来解决：

<button
  name={props.link1}
  value={props.link1}
  onClick={(event) => { props.changePage(event); }}
>
  <h5 className='col s4 waves-effect center-align'>{props.link1}</h5>
</button>

【讨论】：

【解决方案3】：

就像我在 cmets 中所说的那样，您正在尝试访问该元素上不存在的属性，您可以将元素更改为不同的吗？是的，这是处理获取新页面的最佳方式吗？不，可能不是。我会清理一下代码。您应该更直接地了解它的工作方式，传递明确的值来更新，这将强化您的代码并减少出错的可能性。

另外，我将链接变成了一个数组，因此您现在添加新链接所需要做的就是在 links 数组中再添加一个字符串，其余的将由您完成 :)

function Navbar({onClick, links, activeLink}) {
    return (
        <div className='row'>
            { links.map( link => (
              <a href={`/${link}`}
                 onClick={(e) => onChange(e, link)}
              >
                <h5 className={`col s4 waves-effect center-align${activeLink === link ? ' active' : ''}`}
                    name={link}
                >
                  {link}
                </h5>
              </a>
            )}
        </div>
    )
}

然后是您的更改页面处理程序

changePage = (e, page) => {
    e.preventDefault()
    this.setState({ page })
}

NavBar 组件的使用方式是

<Navbar 
  onChange={this.changePage}
  activeLink={this.state.page}
  links={["About", "Portfolio", "Contact"]}
/>

【讨论】：