React 中带有单选按钮的动态文本显示

Question

我正在进行多项选择测验。对于每个问题，每个选项都实现为一个单选按钮。

当用户选择一个选项时，我想显示与他们选择的特定选项相关的文本。

到目前为止，我已经能够实现单选按钮并处理 onChange 事件。 但是，我不知道如何在选择一个选项时显示某些文本（并隐藏其他选项）。

import React from 'react';
import styled from '@emotion/styled'

class Budget extends React.Component {
state = {
  studentLoanPayment: 0,
};

handleInputChange = event => {
    const { name, value } = event.target;
    console.log(name, value, event.target)
    this.setState({ [name]: value });
    /* the below code does not work
    var parent = event.target.parent;
    parent.find('DynamicText').show(); 

   */
};

render() {
  const {
      studentLoanPayment
  } = this.state;

  const totalMonthsDisplay = studentLoanPayment;

    return (
      <div>
          <UL>
              <Li>
                  <h4>
                      How much money should Leif put towards student loans
                      each month?
                  </h4>
              </Li>
              <li>
                          <Label>
                              <input
                                  type="radio"
                                  name="studentLoanPayment"
                                  value="400"
                                  onChange={this.handleInputChange}
                              />
                              400
                            <DynamicText>hidden op1 text</DynamicText>
                          </Label>
              </li>
              <li>
                          <Label>
                              <input
                                  type="radio"
                                  name="studentLoanPayment"
                                  value="500"
                                  onChange={this.handleInputChange}
                              />
                              500
                              <DynamicText>hidden op2 text</DynamicText>
                          </Label>
              </li>
              <li>
                <Label>
                  <input
                    type="radio"
                    name="studentLoanPayment"
                    value="200"
                    onChange={this.handleInputChange}>
                  </input>
                  200
                  <DynamicText>hidden op3 text</DynamicText>
                </Label>
             </li>
          </UL>
        );
      }
   }
const DynamicText = styled.ul`
    display:none;
`

Answer 1

这是一个示例，说明如何使用 state 实现上述目标：https://codesandbox.io/s/focused-sun-bluru?fontsize=14

请注意，我已对您的代码进行了一些小改动以使其正常工作，您需要清理 dom 元素上的大小写并确保正确关闭 dom 标签。我还用 div 替换了您的 DynamicText 组件，但同样的逻辑也适用。