Невозможно передать параметр события с моим this.handleChange в реагировать на родной

Question

Я получаю сообщение об ошибке undefined не является объектом (оценивает 'event.preventDefault)

Я явно не в состоянии дать параметр события this.handleChange в моем дочернем компоненте, который отображается в родительском компоненте.компонент.

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

// Parent component //

export class Home extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  state = {
    name: ""
  };

  handleChange = event => {    // so this event causes problems ... 
                               // when i skip event i get my console.log
                               // and don't receive any errors
    event.preventDefault();
    console.log("handleChange has fired");
    this.setState({
      name: event.target.value
    });
    console.log(this.state.name);
  };

  render() {
    console.log(this.state.name);
    return (
      <View style={styles.container}>
        <MainTitle message={"Bienvenue " + this.state.name} />
        <InputField getNewName={this.handleChange} />
        <PrimaryButton text={"button"} />
      </View>
    );
  }
}


// Child component //

class InputField extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { getNewName } = this.props
    return (
      <TextInput
        placeholder={"Please enter your name"}
        onChangeText={() => getNewName()}
      />
    );
  }
}

export default InputField;

Answer 1

Я предполагаю, что вам не нужен объект native event в вашем TextInput, потому что вы хотите использовать onChangeText, который идеально подходит для вашего случая использования и проще в использовании.Но вы должны передать новое значение вашему this.props.getNewName следующим образом:

<TextInput
  style={{height: 40, borderColor: 'gray', borderWidth: 1}}
  onChangeText={(newText) => this.props.getNewName(newText)}
  value={....}
/>

см. Здесь: https://facebook.github.io/react-native/docs/textinput И ваш обработчик не должен ожидать событие, но newText передается от childTextInput:

handleChange = newTextHere => {
  console.log("handleChange has fired", newTextHere);
  this.setState({
    name: newTextHere
  });
  console.log(this.state.name);
};