我想在 React js 中的单选按钮切换时显示和隐藏表单。我正在尝试如何使用反应钩子来隐藏或显示 onChange 上的组件，甚至

Question

现在我已经使用状态挂钩在页面加载时隐藏表单。单击或切换收音机后，我可以显示表单，但如果我再次切换收音机，表单不会隐藏。

这是我实现的：

const WelcomeTab = () => {
  const [toggle, settoggle] = useState(false);

  return (
    <React.Fragment>
      <Tab.Pane
        style={{
          borderRadius: '7px',
          padding: '30px',
        }}
        attached={false}
      >
        <Grid>
          <Grid.Row>
            <Grid.Column floated="left" width={8}>
              <Header
                style={{
                  fontSize: '18px',
                  fontFamily: 'Nunito-Regular',
                  color: '#4F4F4F',
                }}
              >
                Welcome Screen
              </Header>
            </Grid.Column>
            <Grid.Column floated="right" width={4}>
              <Header
                as="h4"
                style={{
                  display: 'flex',
                  justifyContent: 'space-around',
                  marginLeft: '30px',
                }}
              >
                Customize
                <Radio toggle onChange={() => settoggle({ toggle: !toggle })} />
              </Header>
            </Grid.Column>
          </Grid.Row>
        </Grid>

        {toggle ? (
          <Form style={{ paddingTop: '20px' }}>
            <Form.Field>
              <label style={lableStyle}>Title</label>
              <input style={{ marginBottom: '20px' }} />
              <label style={lableStyle}>Message</label>
              <TextArea />
            </Form.Field>
          </Form>
        ) : null}
      </Tab.Pane>
    </React.Fragment>
  );
};

const lableStyle = {
  fontFamily: 'Nunito-Regular',
  fontWeight: 400,
  color: '#4F4F4F',
  fontSize: '15px',
  display: 'inline-block',
  marginBottom: '10px',
};
export default WelcomeTab;

Answer 1

尝试添加 useEffect 挂钩以及如下更改，您不再需要 {} 这是 setState 的旧语法，我们使用钩子直接进行更改，希望这对您有所帮助

useEffect(()=>{},[toggle])

替换这个错误的语法代码，我可以看到它不是json它的布尔值

<Radio toggle onChange={()=>settoggle({toggle: !toggle})}/>

因为这是旧语法，不适用于钩子，请尝试实现它，

<Radio toggle onChange={()=>settoggle(!toggle)}/>

我想在 React js 中的单选按钮切换时显示和隐藏表单。我正在尝试如何使用反应钩子来隐藏或显示 onChange 上的组件，甚至

I want to show and hide a form on toggle of a radio button in React js . Im trying how to use react hooks to hide or show a component on onChange even

javascript

reactjs

semantic-ui