Question

我正在使用react-bootstrap，并试图获取Form.Control来更改表单提交时的CSS样式。当发生提交时，我可以在控制台中看到formStyle在两者之间发生变化，但是当我相信状态会发生变化时，不会用这些新样式重新呈现。

任何解释都将非常有帮助。

    render() {
        const lockedStyle = {
            backgroundColor: "#26607d",
            color: "#ffffff",
        };

        const unlockedStyle = {
            backgroundColor: "#ffffff",
            color: "#26607d",
        };

        let formStyle = lockedStyle;

        const swap = event => {
            event.preventDefault();
            if (this.state.isLocked) {
                formStyle = unlockedStyle; // Change to Unlocked
                this.setState({ isLocked: false });
                console.log(formStyle);
            } else {
                formStyle = lockedStyle; // Change to Locked
                this.setState({ isLocked: true });
                console.log(formStyle);
            }
        return (
                   <Form onSubmit={swap}>
                       <Form.Control 
                            type="text"
                            placeholder="First Name"
                            style={formStyle}
                       >
                       <Button type="submit">Swap Styles</Button>
                   </Form>
               );
        };

Answer 1

要引起重新渲染，应该进行状态更改，但是每次重新渲染时，都将let formStyle = lockedStyle;中的formstyle设置为lock-style。

尝试将formStyle移至状态变量，然后将this.state.formStyle应用于样式，然后可以删除isLocked并仅将formStyle保留为状态。然后只需在交换状态之间切换即可。

看下面的例子。

但是为了最佳实践，最好保留render方法来渲染所有变量并将其移动到外部，因为一旦定义了变量，您应该始终记住render（）会在每个状态change（setState）发生。

const unlockedStyle = .....
const lockedStyle = ....

export class ComponenetName extends React.Component {
    constructor(){
         this.state = {
              formStyle:unlockedStyle
         }
         this.swap = this.swap.bind(this) //binding swap to this object for careful state changing , for future state changing from other components.... good practice
    }
.....

swap = event => {
       event.preventDefault()
       this.setState((prevState) => {return {formStyle:(prevState.formStyle==lockedStyle? unlockedStyle : lockedStyle)}})```

 }
 .....
 render() {
     return (
     <Form onSubmit={this.swap}>
           <Form.Control 
                type="text"
                placeholder="First Name"
                style={this.state.formstyle}
            >
            <Button type="submit">Swap Styles</Button>
 </Form>)
 }

Answer 2

您可以通过直接在FormControl中设置样式来跳过使用可变的“ formstyle”吗？

style={this.state.isLocked ? lockedStyle : unlockedStyle}

通过onSubmit在React中更改表单的CSS样式

2 个答案: