如何使用或不使用包装箭头函数调用两个函数

Question

import{useState } from 'react'

export const useForm=(callback, initialState={})=>{
     
    const [values, setvalues] = useState(initialState)
    const onChange=(event)=>{
        setvalues({...values,[event.target.name]:event.target.value})
    }
    const onSubmit=  event =>{
        callback();
    }
    return{
        onChange,
        onSubmit,
        values
    }
}
 function createPostCallback(){
            createPost();
          }
          const [open, setOpen] =useState(false)
      
        return (
            <Modal 
            as={Form}
            onSubmit={onSubmit}

这很好用，但是当我将其更改为 {onSubmit&&setOpen(false)} 它说渲染太多，所以我像这样包装了一个箭头函数 {()=> {onsubmit()&&setOpen(false)}} 但只有 onSubmit 函数有效，如果我将其更改为 {()=> {setOpen(false)&&onSubmit()}} 仅 setOpen 有效..我在这里做什么如何解决这个问题!!

     open={true}
     dimmer={'blurring'}
     onClose={() => setOpen(false)}
     onOpen={() => setOpen(true)}
     open={open}
     trigger={<i  class="circular add icon" ></i>}
   >
     <div>


  <Image size='medium' src='/images/avatar/large/rachel.png' wrapped />
    <TextArea
    rows={2}
     placeholder="whats on ur mind..?"
     name="body"
     onChange={onChange}
     value={values.body}
    >
    </TextArea><Modal.Actions>
    <Button  type="submit" color="instagram">post</Button>
      </Modal.Actions>
     </div>    
     </Modal>
 )

}

Answer 1

我认为您只需要在不使用 && 运算符的情况下调用该函数。

onSubmit={() => {  onSubmit(); setOpen(false);  }}

希望有用！

Answer 2

对于简洁的代码，我建议您执行另一个调用这两个函数的函数：

function onSubmitAndSetOpenFalse() {
   onSubmit();
   setOpen(false);
}

...
onSubmit={onSubmitAndSetOpenFalse}

或者你可以像 Shri Hari 告诉的那样做

onSubmit={() => {  onSubmit(); setOpen(false);  }}

两者都可以。

如何使用或不使用包装箭头函数调用两个函数

how to call two functions with or without wrapping arrow function

reactjs

onsubmit