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}

react-native：InputText活动触发TouchableHighlight onPress（）事件

1 个答案: