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

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

最佳答案

导致重新渲染，应该有一个状态更改，但是每次重新渲染时，您都将中的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>)
 }

关于javascript - 通过onSubmit在React中更改表单的CSS样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58099250/