Question

您好，我正在做出反应，我遇到了一些有关单选按钮的问题。我遇到像“是”或“否”的情况，当用户说“是”时，我必须显示文本框，而当他说“否”时，我必须隐藏文本框。

所以任何人都可以给我建议我如何执行此任务。我正在使用Ant设计来显示单选按钮。

example-ng6-lib

Answer 1

您似乎正在使用antd库。您还应该合并component-state来帮助切换Input的显示，我们将其称为showTextBox。

在您的代码中，设置事件监听器和处理程序，以更改Radio.Group选择。

然后，在事件处理程序中，只需进行===检查，即可验证所选项目的值是否为1。评估结果将用于更新状态。

查看有效的沙箱：https://codesandbox.io/s/antd-reproduction-template-oolj3

import React from "react";
import ReactDOM from "react-dom";
import { Form, Radio, Input } from "antd";
import "antd/dist/antd.css";
import "./index.css";

class App extends React.Component {
  state = {
    showTextBox: false
  };

  handleOnChange = e => {
    this.setState({
      showTextBox: e.target.value === 1
    });
  };

  render() {
    const { showTextBox } = this.state;
    return (
      <div>
        <Form.Item>
          <Radio.Group onChange={this.handleOnChange}>
            <Radio value={1}>yes</Radio>
            <Radio value={2}>no</Radio>
          </Radio.Group>
          {showTextBox && <Input placeholder="whatsup" />}
        </Form.Item>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Answer 2

import React from "react";
import { Form, Radio, Input } from "antd";
import "antd/dist/antd.css";

class Autocomplete extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <Form layout="inline">
        <Form.Item>
          <Radio.Group
            name={"rb1"}
            onChange={e =>
              this.setState({
                [e.target.name]: e.target.value
              })
            }
          >
            <Radio value={true}>Yes</Radio>
            <Radio value={false}>No</Radio>
          </Radio.Group>
        </Form.Item>
        {this.state.rb1 ? (
          <Form.Item>
            <Input placeholder="placeholder" allowClear />
          </Form.Item>
        ) : null}
      </Form>
    );
  }
}
const MyForm = Form.create()(Autocomplete);
export default MyForm;

Answer 3

import React from "react";
import ReactDOM from "react-dom";
import { Form, Radio, Input } from "antd";
import "antd/dist/antd.css";
import "./index.css";

class App extends React.Component {
  state = {
    showTextBox: false
  };

  handleOnChange = e => {
    if(e.target.value===1){
      this.setState({showTextBox:true})
    }
    else{
      this.setState({showTextBox:false})
    }

  };

  render() {
    const { showTextBox } = this.state;
    return (
      <div>
        <Form.Item>
          <Radio.Group onChange={this.handleOnChange}>
            <Radio value={1}>yes</Radio>
            <Radio value={2}>no</Radio>
          </Radio.Group>
          {showTextBox && <Input placeholder="whatsup" />}
        </Form.Item>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

在单选按钮上，单击文本框应显示

3 个答案: