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

Question

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

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

Я пытался вот что:

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

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

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

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

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

На моем компоненте, где у меня есть весь этот код, у меня есть это:

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

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

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

Answer 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 действительно обновит DOM, поэтому document.getElementById('someid') может вернуть undefined.