react-native：觸發TouchableHighlight onPress（）事件的InputText活動

Question

我有以下反應本機代碼，我試圖在其中構建自定義表單以收集用戶輸入。 帶有3個輸入框和一個保存按鈕的窗體可以正確呈現。

在下面的代碼中，問題是，當我第一開始輸入TextInput領域， this.saveFormData()這是只有內部稱為TouchableHighlight按鈕被解雇了！

為什么TextInput事件與TouchableHighlight沖突？ 我該如何解決該問題？

class NewScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = { songTitle: null, chord: null, strumPattern: null };
  }

  saveFormData = () => {
    console.log(this.state.songTitle);
    () => navigate("Home");
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
          <View style={styles.row_cell_chord_songTitle}>
            <Text style={styles.new_input_label}> Song Title </Text>
            <TextInput
              style={styles.new_input_field}
              onChangeText={text => this.setState({ songTitle: text })}
              value={this.state.songTitle}
            />
            <Text style={styles.new_input_label}> Chords </Text>
            <TextInput
              style={styles.new_input_field}
              onChangeText={text => this.setState({ chord: text })}
              value={this.state.chord}
            />

            <Text style={styles.new_input_label}> Strumming Pattern </Text>
            <TextInput
              style={styles.new_input_field}
              onChangeText={text => this.setState({ strumPattern: text })}
              value={this.state.strumPattern}
            />
          </View>


            <TouchableHighlight
              style={styles.saveButton}
              onPress={this.saveFormData()} // <-- typing on above Inputbox fires this function.
            >
              <Text style={styles.buttonText}>
                <FontAwesome>{Icons.heart}</FontAwesome> Save
              </Text>
            </TouchableHighlight> */
          </View>
        </View>
      </View>
    );
  }
}

Answer 1

您需要將一個函數傳遞給onPress，當前您正在調用該函數並傳遞其返回的任何內容。 您只需要將其更改為：

onPress={this.saveFormData}