Question

我有一个文本输入，在按下按钮时会打开，该输入应可见并直接显示在键盘上方。问题是当前代码有效，但是直到用户开始键入该组件才变得可见。

我尝试等待setState调用以确保它可见，但这不能解决问题。这不是时间问题，只有在用户键入内容后它才变得可见。问题在于用户看不到他们要输入的内容。

我的组件

class MainTodo extends Component {
  constructor() {
    super();
    this.state = {
      textInput: '',
      inputVisible: false
    };
  }

  componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      this.keyboardDidShow(),
    );
    this.keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      this.keyboardDidHide(),
    );
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  keyboardDidShow() {
    console.log('keyboard opened');
  }

  keyboardDidHide() {
    console.log('keyboard closed');
    this.setState({ inputVisible: false });
  }

  addTodo() {
    if (this.state.textInput !== '') {
      this.props.addTodo(this.state.textInput);
    }
    this.setState({ textInput: '' });
    return;
  }

  async onFloatingButtonPress() {
    await this.setState({ inputVisible: true });
    this.textInputField.focus();
  }

  render() {
    return (
      <KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
        <FlatList
          data={_.sortBy(this.props.todos, (item) => {
            return item.date;
          })}
          extraData={this.props.todos}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => {
            return (
              <TodoItem
                todoItem={item}
                deleteTodo={() => this.props.removeTodo(item)}
              />
            );
          }}
        />
        {this.state.inputVisible ?
          <InputAccessoryView>
            <AddTodo
              textChange={textInput => this.setState({ textInput })}
              addNewTodo={this.addTodo.bind(this)}
              textInput={this.state.textInput}
              ref={(ref) => { this.textInputField = ref; }}
            />
          </InputAccessoryView>
          :
          <FloatingPlusButton tapToAddEvent={this.onFloatingButtonPress.bind(this)} />
        }
      </KeyboardAvoidingView>
    );
  }
}

此外，键盘方法也不起作用，它们都在应用程序启动时控制台记录日志，并且不再运行。任何帮助将不胜感激。

Answer 1

我认为您不需要在onFloatingButtonPress上进行异步等待，通常，我只在涉及API调用时才应用异步等待（因为它处理网络，并且您不知道API何时会返回结果）。

但是，对于您而言，您希望在按下按钮时立即执行this.setState({ inputVisible: true });。尝试从onFloatingButtonPress（）中删除异步并等待

如何在按下按钮时立即显示组件？

1 个答案: