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

Posted 2023-02-22

【中文标题】通过 onSubmit 在 React 中更改表单的 CSS 样式

【英文标题】：Changing CSS styles of Forms in React via onSubmit

【发布时间】：2020-01-25 16:43:03

【问题描述】：

我正在使用 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>
               );
        ;

【参考方案1】：

要导致重新渲染，状态应该会发生变化，但是每次重新渲染时，您都会在 let formStyle = lockedStyle; 中将 formstyle 设置为锁定样式

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

看下面的例子。

但为了最佳实践，最好让 render 方法渲染和移动所有变量到外部，因为一旦定义它们，您应该始终记住 render() 会在每次状态更改 (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>)
 

【讨论】：

非常感谢您。它确实有助于阐明 react 对渲染的作用。

【参考方案2】：

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

style=this.state.isLocked ? lockedStyle : unlockedStyle