Question

在App.js中，我有changePage()函数，用于设置应用程序state的阶段。 state函数使用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>
        )
    }
}

此功能以Header组件的名称prop changePage提供。它由两部分组成：NavLogo和NavBar：

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

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

它使NavItem元素变得无懈可击：

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

}

但它完全不适用于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> 
        );
    }
}

从console.log语句中可以看出，它得到this.props.changePage，它知道e.target，但仅在NavLogo的情况下，#logom元素，它无法获得e.target.value道具的价值。我无法弄清楚为什么在几天内浏览我的代码并重新编写代码。有人能帮我找到原因吗？我会给你所有的感激之情！

Answer 1

在按钮内设置div在语义上是不正确的。

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

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

Answer 2

value属性不是<div>标记的有效属性，因此直接从event.target无效，您可以像e.target.getAttribute('value')

那样获取

value属性可在以下

中找到

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

查看this文档了解更多详情

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

2 个答案: