Question

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

但是，到目前为止，我已经获得了DOM元素的未定义值。

我认为问题可能出在我如何编写函数或如何将其传递到Navbar组件中。

状态

 state = {
    page: 'Home'
  }

更改页面功能

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

如何将其传递到Nav组件

<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

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

Answer 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)}

Answer 2

就像我在评论中说的那样，您正在尝试访问该元素上不存在的属性，您可以将该元素更改为其他属性吗？是的，这是处理获取新页面的最佳方法吗？可能不会。我会整理一下代码。您应该对它的工作方式更具指导性，传递显式值进行更新，这将使您的代码更坚固并且更不易出错。

此外，我将链接转换为数组，因此现在添加新链接所需要做的就是在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"]}
/>

Answer 3

可以通过以下方法解决此问题：使用按钮包装标题，然后执行该函数而不是返回该函数：

@EqualsAndHashCode
public class MyComplicatedClass {
    ...
}

在React.js中使用按钮更改状态

3 个答案: