Блог

У меня есть динамическая форма в react-js, и некоторые из моих элементов являются checkbox / radio, к одному из которых привязан текстовый ввод.
например, вопрос таков: какой ваш любимый цвет?

и ответы таковы:

  - red
 - blue
 - green
 - OTHER
  

перед другим ответом есть текстовый ввод, чтобы пользователь мог ввести в него свой пользовательский ответ.
Как я могу привязать этот флажок / радио к соответствующему вводимому тексту и получить его значение?
форма

Если вы используете более новую версию React, попробуйте перехватить состояние. Что-то вроде

 import React, { useState } from 'react';

function Example() {
  const [color, setColor] = useState('');

  return (
    <div>
    <select value={color} 
          onChange={(e) => setColor(value)}>
      { ['red', 'blue', 'green', 'OTHER'].map((c) => <option key={c} value={c}>{c}</option>)}
    </select>
    {color === 'OTHER' amp;amp; <input type="text"></input>}
    </div>
  );
}
  

https://reactjs.org/docs/hooks-state.html

Используя Material UI, я использовал аналогичное решение, подобное этому, чтобы добавить «Другой» флажок, который можно заполнять:

 import React from "react";
import ReactDOM from "react-dom";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import TextField from "@material-ui/core/TextField";

import "./styles.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      options: ["red", "blue", "green", "other"],
      filterOptions: ["red", "blue", "green"],
      checkedValues: [],
      otherValue: "other"
    };
  }

  handleOther = () => event => {
    let value = event.target.value;
    this.setState({
      otherValue: value
    });
  };

  handleSaveOther = () => event => {
    let newCheckedValues = [...this.state.checkedValues]; // make a separate copy of the array
    let intersection = newCheckedValues.filter(x =>
      this.state.filterOptions.includes(x)
    );
    let allValues = [...intersection, this.state.otherValue];

    if (this.state.other) {
      this.setState({
        checkedValues: allValues
      });
    }
  };

  handleCheck = option => event => {
    let value = event.target.value;
    let checked = event.target.checked;
    let newCheckedValues = [...this.state.checkedValues]; // make a separate copy of the array
    let index = newCheckedValues.indexOf(value);
    if (index !== -1) {
      newCheckedValues.splice(index, 1);
      this.setState({
        checkedValues: newCheckedValues,
        [option]: checked
      });
    } else {
      this.setState({
        checkedValues: [...this.state.checkedValues, value],
        [option]: checked
      });
    }
  };

  render() {
    const { options, checkedValues, otherValue } = this.state;
    console.log(checkedValues);
    return (
      <div className="App">
        <div style={{ width: "50%", margin: "0 auto" }}>
          <FormGroup>
            {options.map((option, i) => {
              return (
                <FormControlLabel
                  control={
                    <Checkbox
                      onChange={this.handleCheck(option)}
                      value={option === "other" ? otherValue : option}
                      color={"primary"}
                    />
                  }
                  label={
                    option === "other" ? (
                      <TextField
                        id={"other"}
                        name={"other"}
                        value={this.state.otherValue}
                        fullWidth
                        onChange={this.handleOther()}
                        onBlur={this.handleSaveOther()}
                      />
                    ) : (
                      option
                    )
                  }
                />
              );
            })}
          </FormGroup>
        </div>
      </div>
    );
  }
}
  

Смотрите рабочий пример здесь