On radio button click text box should display

Question

Hi i am working on react and i am facing some issues regarding the radio button.I have case like Yes or No where when ever user say Yes i have to show the text box and when he say No i have to hide the text box.

so can any one give me the suggestion that how i can perform this task. I am using Ant design to show the radio button.

        <Form.Item>
          {getFieldDecorator("isBranchAvailable", {
            initialValue: this.props.firmDetails.isBranchAvailable,
          })(
              <Radio.Group>
                <Radio value={1}>yes</Radio>
                <Radio value={2}>no</Radio>
              </Radio.Group>
          )}
        </Form.Item>

use onChange event on RadioGroup and use setState to do required output — hruday kumar reddy
– hruday kumar reddy, Commented Aug 14, 2019 at 5:43
hey thanks for your suggestion it help to me. But how you can hold state to the updated value when you work on multi page application — Paresh Jaiswal
– Paresh Jaiswal, Commented Aug 14, 2019 at 5:55

Cat_Enthusiast · Accepted Answer · 2019-08-14 06:06:05Z

1

It looks like you're using the antd library. You should also incorporate component-state to help toggle the display of the Input, we'll call this showTextBox.

In your code, set up an event-listener and handler for changes to the Radio.Group selection.

Then in the event-handler simply verify if the selected item has a value of 1 with a === check. The evaluated result will be used to update the state.

See working sandbox: 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"));

edited Aug 14, 2019 at 6:06

answered Aug 14, 2019 at 6:00

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Paresh Jaiswal Over a year ago

it is working for me but now when say Yes and pass value to input box and move back and forth the state again set to false because of that the text box get hide. Is there any way that i can hold my state on multi page application

Cat_Enthusiast Over a year ago

You would have to integrate some type of global-state manager like Redux to help persist that data or you can use local-storage to preserve that data. Would either sound good to you?

Tabrez Ansari · Accepted Answer · 2019-08-14 06:53:50Z

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;

Mohammed Al-Reai · Accepted Answer · 2019-08-14 07:16:22Z

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"));

Collectives™ on Stack Overflow

On radio button click text box should display

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related