OnClick函数无法获取一个块的“值”属性的值，但可以获取另一块的值

Question

In App.js I have changePage() function which sets stage of App's state . This state is used by addContent() function to render main content of the application:

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

This function is given to Header component as prop named changePage . And there it is handed to two different components: NavLogo and NavBar :

class Header extends Component {
    render() {
        return (
            <header id="moving-header">
                <NavLogo changePage={ this.props.changePage } />
                <NavBar changePage={ this.props.changePage } />
            </header>
        )
    }
}

From NavBar to 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>
        );
    }
}

It worsk flawless for NavItem elements:

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

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

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

    render() {
        return (
        <li isActive={ this.props.isActive /*Apply certain styles on active button*/}>
            <button
                className={ this.props.buttonType /*bn or blog*/} 
                value={ this.props.page /*main or blog*/} 
                href={ this.props.area /*optional - anchor to section on Main page*/ }


          onClick={ this.handlePageChange /*For all buttons - handles change of page*/}>
        { this.props.itemName /*Name of button for User*/}</button>
    </li>
    );
}

}

But it completely doesn't for 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> 
        );
    }
}

As it may be seen from console.log statements, it gets this.props.changePage , it knows e.target , but only in case of NavLogo ,'s #logom element, it cannot obtain it's e.target.value prop's value. I cannot figure out why for a couple of days wandering through my code and re-writing it. Could someone help me find the reason? I'll give you all my gratitude!

Answer 1

Having a div inside a button is semantically incorrect.

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

Change the syntax to a valid one and use the proper way of getting the value. If you want to use a div you may want to add a data attribute to it. Something like data-value and use this as a value.

Answer 2

value attribute is not a valid attribute for the <div> tag, and hence it is unavailable from event.target directly, you could get it like e.target.getAttribute('value')

The value attribute is available on following

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

Check this documentation for more details