Question

我对React还是有点陌生，无法获得保证金。

 const pStyle = {
        marginTop: '40px'

        };

当我在div中应用它时，什么也没有发生，我想我错过了一些建议，请

import React, { Component } from "react";
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
/* Import Components */
import Input from "../components/input/Input";
import Button from "../components/button/Button";
import { actionCreators } from '../store/ContainerReducer';

const pStyle = {
    marginTop: '40px'

    };

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

        this.state = {
            localBook: {
                title: "",
                author: "",
                genre: "",
                price: ""
            },
        };

        this.handleTitle = this.handleTitle.bind(this);
        this.handleAuthor = this.handleAuthor.bind(this);
        this.handleGenre = this.handleGenre.bind(this);
        this.handlePrice = this.handlePrice.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
        this.handleClearForm = this.handleClearForm.bind(this);
    }

    /* This lifecycle hook gets executed when the component mounts */

    handleTitle(e) {
        let value = e.target.value;
        this.setState(
            prevState => ({
                localBook: {
                    ...prevState.localBook,
                    title: value
                }
            }),
            () => console.log(this.state.localBook)
        );
    }

    handleAuthor(e) {
        let value = e.target.value;
        this.setState(
            prevState => ({
                localBook: {
                    ...prevState.localBook,
                    author: value
                }
            }),
            () => console.log(this.state.localBook)
        );
    }

    handleGenre(e) {
        let value = e.target.value;
        this.setState(
            prevState => ({
                localBook: {
                    ...prevState.localBook,
                    genre: value
                }
            }),
            () => console.log(this.state.localBook)
        );
    }

    handlePrice(e) {
        let value = e.target.value;
        this.setState(
            prevState => ({
                localBook: {
                    ...prevState.localBook,
                    price: value
                }
            }),
            () => console.log(this.state.localBook)
        );
    }

    handleFormSubmit(e) {
        e.preventDefault();
        this.props.requestBooks(this.state.localBook);

    }

    handleClearForm(e) {
        e.preventDefault();
        this.setState({
            localBook: {
                title: "",
                author: "",
                genre: "",
                price: ""
            }
        });
    }

    render() {
        return (
            <div class="pStyle">
                <form className="container-fluid" onSubmit={this.handleFormSubmit}>
                    <Input
                        inputType={"text"}
                        title={"Title"}
                        name={"title"}
                        value={this.state.localBook.title}
                        placeholder={"Enter Title"}
                        handleChange={this.handleTitle}
                    />{" "}
                    {/* Title */}
                    <Input
                        inputType={"text"}
                        title={"Author"}
                        name={"author"}
                        value={this.state.localBook.author}
                        placeholder={"Enter Author"}
                        handleChange={this.handleAuthor}
                    />{" "}
                    {/* Author */}
                    <Input
                        inputType={"text"}
                        title={"Genre"}
                        name={"genre"}
                        value={this.state.localBook.genre}
                        placeholder={"Select Genre"}
                        handleChange={this.handleGenre}
                    />{" "}
                    {/* Genre */}
                    <Input
                        inputType={"text"}
                        title={"Price"}
                        name={"price"}
                        value={this.state.localBook.price}
                        placeholder={"Select Price"}
                        handleChange={this.handlePrice}
                    />{" "}
                    {/* Price */}
                    <Button
                        action={this.handleFormSubmit}
                        type={"primary"}
                        title={"Submit"}
                        style={buttonStyle}
                    />{" "}
                    {/*Submit */}
                    <Button
                        action={this.handleClearForm}
                        type={"secondary"}
                        title={"Clear"}
                        style={buttonStyle}
                    />{" "}
                    {/* Clear the form */}
                </form>
            </div>
        );
    }
}

const buttonStyle = {
    margin: "10px 10px 10px 10px"
};

export default connect(
    null,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(FormContainer);

我有这个App.js

import React from 'react';
import { Route } from 'react-router';
import Layout from './components/Layout';
import Posts from './components/Posts';
import FormContainer from './components/FormContainer';
import 'typeface-roboto';
export default () => (
    <Layout>
        <Route exact path='/' component={FormContainer} />
        <Route exact path='/' component={Posts} />
    </Layout>
);

我有这个Layout.js

import React from 'react';
import { Container } from 'reactstrap';
import '../../node_modules/primereact/resources/primereact.css';
import '../../node_modules/primereact/resources/themes/nova-dark/theme.css';
import NavMenu from './NavMenu';

export default props => (
    <div>
        <NavMenu />
        <Container>
            {props.children}
        </Container>
    </div>
);

Answer 1

您必须将样式设置为div

<div style={pStyle}>
</div>

Answer 2

您不应使用class关键字来添加样式，而应使用style关键字来添加样式。而且您应该将其用花括号括起来，因为pStyle是JSX常量，而不是字符串。

P.S .：而且，在React中，您应该使用className而不是class。仅供参考。

这是您的情况下应该如何工作：

          <div style={pStyle}>
            <form className="container-fluid" onSubmit={this.handleFormSubmit}>
                <Input
                    inputType={"text"}
                    title={"Title"}
                    name={"title"}
                    value={this.state.localBook.title}
                    placeholder={"Enter Title"}
                    handleChange={this.handleTitle}
                />{" "}
                {/* Title */}
                <Input
                    inputType={"text"}
                    title={"Author"}
                    name={"author"}
                    value={this.state.localBook.author}
                    placeholder={"Enter Author"}
                    handleChange={this.handleAuthor}
                />{" "}
                {/* Author */}
                <Input
                    inputType={"text"}
                    title={"Genre"}
                    name={"genre"}
                    value={this.state.localBook.genre}
                    placeholder={"Select Genre"}
                    handleChange={this.handleGenre}
                />{" "}
                {/* Genre */}
                <Input
                    inputType={"text"}
                    title={"Price"}
                    name={"price"}
                    value={this.state.localBook.price}
                    placeholder={"Select Price"}
                    handleChange={this.handlePrice}
                />{" "}
                {/* Price */}
                <Button
                    action={this.handleFormSubmit}
                    type={"primary"}
                    title={"Submit"}
                    style={buttonStyle}
                />{" "}
                {/*Submit */}
                <Button
                    action={this.handleClearForm}
                    type={"secondary"}
                    title={"Clear"}
                    style={buttonStyle}
                />{" "}
                {/* Clear the form */}
            </form>
        </div>

为什么<div>样式在我的组件中不起作用

2 个答案: