Javascript OnClick函数无法获取一个块的值'；s'；价值'；道具，但它可以获得另一个块的值

在App.js中，我有一个

changePage（）

函数，它设置了App的

状态的阶段。此
状态
由
addContent（）
函数用于呈现应用程序的主要内容：

    class App extends Component {
        constructor(props) {
            super(props);
            this.state = {
               content: "main"
            };
        }

    changePage(pageName) {
        this.setState({
            content: pageName
        });
    }

    addContent() {
        if (this.state.content === "main") {
            return(
                <Main />
            );
        } else if (this.state.content === "blog") {
            return (
                <Blog />
            );
        } else {
            console.log("Reference error: Invalid page.");
        };
    }

    render() {
        return (
            <div className="App">
                <Header changePage={ this.changePage.bind(this) } />
            </div>
        )
    }
}

从
NavBar
到
NavItem
：

class NavBar extends Component {
    render() {
        return (
            <ul className="nav">
                <NavItem 
                    isActive = {true}
                    buttonType = "bt"
                    page = "main"
                    area = "#home"
                    changePage = {this.props.changePage}
                    itemName="home" 
                />
                <NavItem 
                    isActive = {false}
                    buttonType = "blog"
                    page = "blog"
                    changePage = {this.props.changePage}
                    itemName="blog" 
                />
            </ul>
        );
    }
}

}

但它完全不适用于
NavLogo
：

class NavLogo extends Component {
    constructor(props) {
        super(props);

        this.handlePageChange = this.handlePageChange.bind(this);
    }

    handlePageChange(e) {
        this.props.changePage(e.target.value);
        console.log(this.props.changePage);
        console.log(e.target);
        console.log(e.target.value);
    }

    render() {
        return (
            <button className="logo-button">
                <div className="logom" value="main" onClick={ this.handlePageChange } ></div>
            </button> 
        );
    }
}

class-NavLogo扩展组件{
建造师（道具）{
超级（道具）；
this.handlePageChange=this.handlePageChange.bind（this）；
}
handlePageChange（e）{
this.props.changePage（如target.value）；
console.log（this.props.changePage）；
console.log（如target）；
console.log（如target.value）；
}
render（）{
返回(
);
}
}

从
console.log
语句可以看出，它得到
这个.props.changePage
，它知道
e.target
，但只有在
NavLogo
、logom

元素的情况下，它才能获得

e.target.value

prop的值。我不明白为什么有几天我在代码中徘徊，然后重新编写代码。

---

有人能帮我找到原因吗？我要向你表示我的感激

按钮中包含div在语义上是不正确的

<button className="logo-button">
    <div className="logom" value="main" onClick={ this.handlePageChange } ></div>
</button>

---

将语法更改为有效语法，并使用正确的方法获取值。如果要使用div，可能需要向其添加数据属性。类似于数据值的内容并将其用作值。

在按钮中包含div在语义上是不正确的

<button className="logo-button">
    <div className="logom" value="main" onClick={ this.handlePageChange } ></div>
</button>

---

将语法更改为有效语法，并使用正确的方法获取值。如果要使用div，可能需要向其添加数据属性。类似于数据值的内容并将其用作值。

值

属性不是

标记的有效属性，因此它不能直接从

事件.target

获取，您可以像

e.target.getAttribute（'value'）那样获取它。

值

属性在以下位置可用

<button>, <option>, <input>, <li>, <meter>, <progress>, <param>

，
，

---

查看文档以了解更多详细信息

值

属性不是

标记的有效属性，因此它不能直接从

事件.target

获取，您可以像

e.target.getAttribute（'value'）那样获取它

值

属性在以下位置可用

<button>, <option>, <input>, <li>, <meter>, <progress>, <param>

，
，

---

查看文档了解更多详细信息

e.target.getAttribute（'value'）成功了！Shubham Khatri，谢谢你，伙计！我还将属性名更改为dataValue。很高兴您真的这么做了！e、 getAttribute（'value'）成功了！Shubham Khatri，谢谢你，伙计！我还将属性名更改为dataValue。很高兴您真的这么做了！