FormActions() — react Function Reference

Architecture documentation for the FormActions() function in index.js from the react codebase.

Function javascript BabelCompiler Optimization

Entity Profile

BabelCompiler→ Optimization→ FormActions() — react Function Reference

Dependency Diagram

graph TD
  a2e841b6_7da9_153f_d3e0_5373b78a489b["FormActions()"]
  eb3b1ca6_d6f3_8eb2_b52b_2d07d155def1["index.js"]
  a2e841b6_7da9_153f_d3e0_5373b78a489b -->|defined in| eb3b1ca6_d6f3_8eb2_b52b_2d07d155def1
  style a2e841b6_7da9_153f_d3e0_5373b78a489b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/form-actions/index.js lines 11–113

export default function FormActions() {
  const [textValue, setTextValue] = useState('0');
  const [radioValue, setRadioValue] = useState('two');
  const [checkboxValue, setCheckboxValue] = useState([false, true, true]);
  const [selectValue, setSelectValue] = useState('three');

  return (
    <form
      action={async () => {
        await defer(500);
      }}
      onReset={() => {
        setTextValue('0');
        setRadioValue('two');
        setCheckboxValue([false, true, true]);
        setSelectValue('three');
      }}>
      <div style={{display: 'flex'}}>
        <fieldset style={{flexBasis: 0}}>
          <legend>type="text"</legend>
          <input
            type="text"
            name="text"
            value={textValue}
            onChange={event => setTextValue(event.currentTarget.value)}
          />
        </fieldset>
        <fieldset style={{flexBasis: 0}}>
          <legend>type="radio"</legend>
          <input
            type="radio"
            name="radio"
            value="one"
            checked={radioValue === 'one'}
            onChange={() => setRadioValue('one')}
          />
          <input
            type="radio"
            name="radio"
            value="two"
            checked={radioValue === 'two'}
            onChange={() => setRadioValue('two')}
          />
          <input
            type="radio"
            name="radio"
            value="three"
            checked={radioValue === 'three'}
            onChange={() => setRadioValue('three')}
          />
        </fieldset>
        <fieldset style={{flexBasis: 0}}>
          <legend>type="checkbox"</legend>
          <input
            type="checkbox"
            name="checkbox"
            value="one"
            checked={checkboxValue[0]}
            onChange={event => {
              const checked = event.currentTarget.checked;
              setCheckboxValue(pending => [checked, pending[1], pending[2]]);
            }}
          />
          <input
            type="checkbox"
            name="checkbox"
            value="two"
            checked={checkboxValue[1]}
            onChange={event => {
              const checked = event.currentTarget.checked;
              setCheckboxValue(pending => [pending[0], checked, pending[2]]);
            }}
          />
          <input
            type="checkbox"
            name="checkbox"
            value="three"
            checked={checkboxValue[2]}
            onChange={event => {
              const checked = event.currentTarget.checked;
              setCheckboxValue(pending => [pending[0], pending[1], checked]);