Функция React onChange не срабатывает при передаче ее компоненту - PullRequest
Новая
       31

Функция React onChange не срабатывает при передаче ее компоненту

0 голосов
/ 13 мая 2019

Решено, см. Комментарий ниже (Нужно было только переместить функцию Chooser и Section за пределы компонента класса, чтобы заставить его работать.

Итак, у меня есть проблема с функцией реакции на изменение. Кажется, он не работает, когда он передается компоненту в качестве реквизита. Я попытался передать компонент вместо данных, но все равно он не работал. Пожалуйста, рассмотрите следующий пример: 

export default class Parent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      type: '1',
      number: ''
    }
  }

  handleChange = e => {
    const { name, value } = e.target
    this.setState({ [name]: value })
  }

  render() {
    return (
      <div className="App">
          <Form
            type={this.state.type}
            number={this.state.number}
            handleChange={this.handleChange}
          />
      </div>
      }
  }


//receiving the props
export default class Child extends Component {
        constructor(props) {
            super(props)
        }

        render() {
            const Chooser = ({ type, section }) => {
                switch (type) {
                    case '1':
                        return <Fragment>{section}</Fragment>
                    default:
                        return <Fragment>></Fragment>
                }
            }
            const Section = ({ number, handleChange }) => (
                <Fragment>
                    <div>
                        <label>Number</label>
                        <input
                            type='text'
                            name='number'
                            placeholder='123456789'
                            value={number}
                            onChange={handleChange}
                        />
                    </div>
                </Fragment>
            )

            return (
                <Chooser
                    type={this.props.type}
                    section={
                        <Section
                            number={this.props.number}
                            handleChange={this.props.handleChange}
                        />
                    }
                />
            )
        }
    }

Интересно, если я положу onChange на уровень Section, он сработает. Но это не то, что я хочу, так как переданный компонент может иметь несколько функций ввода, которые я хочу передать. 

         return (
                <Chooser
                    type={this.props.type}
                    section={
                        <Section
                            number={this.pops.number}
                            onChange={this.pops.handleChange}
                        />
                    }
                />

Есть идеи, как я могу передать функцию onChange, используя реквизит? В аналогичном примере изменение ввода работает, но оно теряет фокус при каждом нажатии значения. Уже пытался назначить ключи, но это тоже не сработало.

Ответы [ 3 ]

0 голосов
/ 13 мая 2019

В настоящее время вы используете это как handleChange метод 

handleChange = e => {
  const { name, value } = e.target.value
  this.setState({ [name]: value })
}

Вы должны изменить его на это. 

handleChange = e => {
  const { name, value } = e.target;
  this.setState({ [name]: value })
}

Похоже, вы обращаетесь к неправильному свойству в target потому что name всегда будет undefined внутри e.target.value и, следовательно, вызов setState ничего не сделает.

Кроме того, вам, вероятно, следует объявлять компоненты вашей функции вне компонента класса.

0 голосов
/ 13 мая 2019

Вы можете обернуть handleChange() в анонимную функцию, так что она будет активно ждать, пока вы внесете изменения во входные данные.В противном случае он будет работать при рендере. 

 const Section = ({ number, handleChange }) => (
                <Fragment>
                    <div>
                        <label>Number</label>
                        <input
                            type='text'
                            name='number'
                            placeholder='123456789'
                            value={number}
                            onChange={(e) => handleChange(e)}
                        />
                    </div>
                </Fragment>
            )
0 голосов
/ 13 мая 2019

это потому что вам нужно деструктурировать это следующим образом const {handleChange} = this.props.handleChange

...