Single onChange that can handle single- and multi-select Form changes

Asked
Active3 hr before
Viewed126 times

7 Answers

singlehandleonchange
90%

Meta Stack Overflow , Stack Overflow help chat ,Stack Overflow en español

If you want to define a form-level handler, you need to make an exception for multiple selects:

    const onChange = (event) => {
       const value = isMultipleSelect(event.target) ?
          getSelectedValuesFromMultipleSelect(event.target) :
          event.target.value
       this.setState({
          [event.target.name]: value
       })
    };

    const isMultipleSelect = (selectTag) => selectTag.tagName === 'SELECT' && selectTag.multiple

    const getSelectedValuesFromMultipleSelect = (selectTag) => [...selectTag.options].filter(o => o.selected).map(o => o.value)
88%

The onChange handler will listen for any change to the input and fire an event when the value changes. With a text input field like this, we can pass the onChange prop:,There is an important change necessitated with checkboxes, and that is an adjustment to the handleChange function:,This handler will simply print the new value that the text input is changed to.

1<label>
2  First name
3  <input
4    type="text"
5    onChange={handleChange}
6  />
7</label>
load more v
72%

If you typed in the URL yourself, please double-check the spelling.If you got here from a link within our site, please Contact Us.

Pretag
 Pretag team - issue, fix, solve, resolve
65%

In the example below, we have the handleChange function that will be executed when the value of the input textbox changes.,Let's assume, we have a form with the following elements to capture user inputs,, Last is to define the handler function, handleChange to change the state of the component.

In the example below, we have the handleChange function that will be executed when the value of the input textbox changes.

<html>
  <body>
    <input type="text" 
            name="uname" 
            placeholder="Enter Username" 
            onchange="handleChange(this.value)">

    <script>
      function handleChange(val) {
        console.log(`The value is ${val}`);
      }
    </script>
  </body>
</html>
load more v
75%

A dropdown menu for displaying choices - an elegant alternative to the native <select> element.,Select component to select value from options.,Custom selection render

import { Select } from 'antd';

const { Option } = Select;

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <>
    <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="disabled" disabled>
        Disabled
      </Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>
    <Select defaultValue="lucy" style={{ width: 120 }} disabled>
      <Option value="lucy">Lucy</Option>
    </Select>
    <Select defaultValue="lucy" style={{ width: 120 }} loading>
      <Option value="lucy">Lucy</Option>
    </Select>
    <Select defaultValue="lucy" style={{ width: 120 }} allowClear>
      <Option value="lucy">Lucy</Option>
    </Select>
  </>,
  mountNode,
);
load more v
40%

In HTML, a <textarea> element defines its text by its children:,We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.,In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().

<form>
   <label>
      Name:
      <input type="text" name="name" />
   </label>
   <input type="submit" value="Submit" />
</form>
load more v
22%

When multiple items are selected, this still will be used to separate values in the dropdown title.,Keys that will be initially used to set selected items. This prop is used for multiSelect scenarios. In other cases, defaultSelectedKey should be used.,Optional preference to have onChanged still be called when an already selected item is clicked in single select mode. Default to false

Keys that will be initially used to set selected items. This prop is used for multiSelect scenarios. In other cases, defaultSelectedKey should be used.

defaultSelectedKeys ? : string[] | number[];
load more v

Other "single-handle" queries related to "Single onChange that can handle single- and multi-select Form changes"