Получить имя цели события (не значение) из React Bootstrap Form? - PullRequest
Новая
       8

Получить имя цели события (не значение) из React Bootstrap Form?

0 голосов
/ 27 апреля 2020

У меня есть React Bootstrap Компонент формы

https://react-bootstrap.github.io/components/forms/#forms

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


this.setState({
           [event.target.name]: event.target.value
        })

, но я хотел использовать форму React Bootstrap. Я уже могу получить значение для ввода формы, но не могу найти способ получить его ссылочное имя (например, если поле ввода для имя_дилера, я не могу получить строку 'dealerName', поэтому я могу ее динамически обновлять вместо того, чтобы жестко закодировать имя свойства состояния в значение для его обновления), чтобы я мог динамически обновлять состояние. Без этого мне пришлось бы создавать несколько отдельных функций для всех различных форм, которые у меня есть.

Это мой пример React Bootstrap Форма : 

    <Form>
          <Form.Group controlId="formDealersAdd">
          <Form.Label>userId:</Form.Label>
          <Form.Control type="text" placeholder="userId" ref={this.userId} onChange={this.handleInputChange}/>
          <Form.Label>dealerName:</Form.Label>
          <Form.Control type="text" placeholder="dealerName" ref={this.dealerName} onChange={this.handleInputChange} />
          <Form.Label>dealer id:</Form.Label>
          <Form.Control type="text"  placeholder={did} ref={this.did} onChange={this.handleInputChange} />
          <Button variant="secondary" size="lg" onClick={this.handleDealersAddFormClick}>SUBMIT</Button>{' '}
          </Form.Group>
    </Form>

Мой конструктор выглядит следующим образом: 

    class App extends Component {

      constructor(props) {
        super(props);

        this.userId= React.createRef();
        this.dealerName = React.createRef();
        this.did = React.createRef();

        this.state = {
          userId: '',
          dealerName: '',
          did: '',
        };
      }
    }

И моя handleInputChange функция: 

    handleInputChange = (event) => {
        event.preventDefault()

   // manually hardcoding it like this causes issues and makes my code bad
         this.setState({
          userId: this.userId.current.value,
          dealerName: this.dealerName.current.value,
          did: this.did.current.value
        })
      }

Я изначально обрабатывал inputChange, просто установив состояние с 

    this.setState({
    [event.target.name]: event.target.value
    })

, и это работало нормально для стандартной формы (не-React Boostrap), и оно возвращает правильное значение для ввода, которое активно обновляется / набирается внутри пользователем, но event.target.name не работает.

Таким образом, как вы можете видеть выше, я просто вручную закодировал значения для обновления внутри объекта state , но это грязно и вызывает ошибку, когда пользователь нажимает, чтобы увидеть новую форму на моем веб-сайте, и свойства имеют нулевое значение, и состояние пытается обновить, поэтому оно падает.

Есть ли способ обновить мои свойства состояния для входы т Форма React Bootstrap похожа на то, как я использовал [event.target.name]: event.target.value для обычной формы?

1 Ответ

0 голосов
/ 27 апреля 2020

К get its reference name, добавить значения в реквизит name будет в порядке

До: 

<Form.Control type="text" placeholder="userId" ref={this.userId} onChange={this.handleInputChange}/>

После: 

<Form.Control type="text" name="userId" placeholder="userId" ref={this.userId} onChange={this.handleInputChange}/>
...