Текст ввода внутри реагирующего компонента

Я пытаюсь создать входной текст внутри реагирующего компонента, а затем понял, что это плохая практика. Поэтому я немного исследовал, поэтому нашел Controlled-Components , поэтому я думаю, что это то, что мне нужно, но, глядя на мой Component я не знаю, как его создать.

У меня нет расширений extends Redux.Component поэтому друг предложил мне создать компонент, но не смог добиться успеха.

Я пытался это сделать:

Внутри моего component

 <input
        ...
      />
      {"  "}
      <input
        ...
      />
      <span>
        <myButton
          ...
          arguments={[document.getElementById("id1").value, document.getElementById("id2").value]}
        >
          [ send ]
        </myButton>{" "}
      </span>

Но я получаю эту ошибку:

Данный идентификатор не должен иметь значение null !; Вложенное исключение - java.lang.IllegalArgumentException: данный идентификатор не должен быть нулевым!

РЕДАКТИРОВАТЬ

На моем компоненте, где у меня есть все эти коды, у меня есть следующее:

 <myButton
          id={id}
          arguments={[intputStuff]}
        >

Поэтому моя проблема в том, что если я сделаю то, что говорит Том, у меня нет идентификатора в другом компоненте.

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

Всего 1 ответ


Из вашего сообщения неясно, что именно вы пытаетесь выполнить.

Похоже, вы пытаетесь создать компонент с двумя текстовыми вводами и кнопкой.

Если вы хотите, чтобы кнопка «подавала» значения двух входов, вы должны сделать что-то вроде этого:

class SomeComponent extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            value1: props.initialValue1,
            value2: props.initialValue2
        }
    }


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


    onClickSubmit = (event) => {
        let { onSubmit } = this.props
        if(typeof onSubmit !== 'function') return

        let { value1, value2 } = this.state
        return onSubmit([ value1, value2 ])
    }


    render() {
        let {
            initialValue1,
            initialValue2,
            onSubmit,
            className,
            ...props
        } = this.props

        let {
            value1,
            value2
        } = this.state

        return (
            <div className={`SomeComponent ${className}`} {...props}>
                <input value={value1} name="value1" onChange={this.onChangeText} />

                <input value={value2} name="value2" onChange={this.onChangeText} />

                <button onClick={this.onClickSubmit}>
                    Submit
                </button>
            </div>
        )
    }
}

Несколько примечаний:

  1. В этом примере используется куча футуристических JS: деструктурирование, отдых / распространение, свойства класса, имена вычисляемых свойств и функции стрелок. Каждая функция используется для определенной цели, а не только потому, что они классные. Если ваша среда не поддерживает некоторые из этих функций, вам нужно найти обходное решение, которое улучшит некоторые дополнительные ограничения.

  2. Это не контролируемый компонент, но он содержит 2 управляемых входа. Он использует шаблон «initialValue»: собственный компонент предоставляет начальные значения, но не знает об ударе, поскольку пользователь набирает каждый символ. Собственный компонент уведомляется только о новых значениях при нажатии кнопки. Этот шаблон может привести к потере данных, если владелец повторно отображается до отправки текущего значения.

  3. Как правило, при использовании React вы хотите избежать использования собственных методов DOM для доступа к элементам или управления ими. (Разумеется, существует множество исключений.) Одна из причин, по которой вы хотите избежать встроенных методов DOM, заключается в том, что методы жизненного цикла компонента могут выполняться до того, как рендеринг React действительно document.getElementById('someid') DOM, поэтому document.getElementById('someid') может возвращать undefined ,


Есть идеи?

10000