Получить значение из проверенного ввода в React

Question

У меня есть сложный объект в React и я не могу понять, как получить значение из проверенного ввода. Есть кусок кода с вводом. Мне нужно добавить проверенное значение ввода вместо слов «Входное значение».

const ClientForm = React.createClass({

      .....

      render: function() {

          ......
          return(

              < AgForm.Input >
              < label className = 'myLabel' >
              < input className = "valueBroker"
              disabled = {
                readOnly
              }
              type = 'checkbox'
              name = 'is_broker'
              onChange = {
                this.form().checkbox('is_broker', true)
              }
              checked = {
                _isTrue(this.form().value('is_broker'))
              }
              />
              Agent < /label> < /AgForm.InputLine> < AgForm.InputLine error = {
                errors.system
              }
              /> < /div>


              module.exports = AddClientForm;



              const ClientListItem = React.createClass({

                    render() {

                      return

                      <div >
                        Input value {
                          (client.kind_name || '').split(',').map((type) => {
                            return <div > {
                              type
                            } < /div>
                          })
                        }

                      < /div>

                    })

javascript reactjs

3

Lucky 16 Дек 2015 в 18:02

Answer 1

Вы можете просто привязать значение и метод обновления к состоянию вашего компонента и установить действия непосредственно в исходной разметке ввода с помощью обработчика onChange.

Обратите внимание, что React является однонаправленным, а не двунаправленным, поэтому может быть полезно попытаться контролировать все от React до вашего рендеринга html, а не наоборот или туда-сюда.

Следующий код взят из: https://facebook.github.io/react/docs/forms. HTML

getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }

1

msmfsd 27 Апр 2016 в 05:14

Answer 2

Если вы используете React refs для получения ваших входных значений:

class Form extends React.Component {
    constructor(props) {
        //... state

        this.checkBoxRef = React.createRef()
    }

    handleFormSubmit = (e) => {
        e.preventDefault()
        let isChecked = this.checkBoxRef.current.checked
        console.log(isChecked) // true | false
    }

    render() {
         return (
              <Form onSubmit={this.handleFormSubmit}>
                   <input type="checkbox" ref={this.checkBoxRef}/>
                   <button type="submit" />
              </Form>
         )
    }
}

0

Phillip 15 Июл 2019 в 04:57

Answer 3

Вы можете использовать, чтобы поймать событие

class MyForm extends React.Component {
    handleChange(event){
       console.info(event.target.checked,
                    event.target.value, 
                    event.target.dataset.attr);
    };

    render(){
        return (
        <input
            type="text"
            value={'myValue'}
            data-attr={'attrValue'}
            onChange={this.handleChange}
          />);
   }
};

0

Roman 13 Авг 2017 в 09:53

Answer 4

До сих пор я не использовал так много реакции, но я думаю, что вы можете получить значение флажка, используя это:

event.target.checked

13

Himanshu Teotia 20 Апр 2018 в 06:22

Получить значение из проверенного ввода в React

4 ответа

Похожие вопросы

Новые вопросы

javascript