Question

当我的应用加载时，以下查询将运行，并且数据库的结果将显示在浏览器中。但是，我的应用程序也有一个提交按钮。在传递来自提交的时间戳输入的同时按下提交按钮时，如何运行整个组件？

handleSubmit(event) {
  event.preventDefault();
  console.log(this.state.inputValue)
  this.state = {
    inputValue: new Date(document.getElementById("time").value).valueOf()
  };
  console.log(this.state);            
}

这是UserList组件代码：

const UserList = props => (
  <Query
    query={gql`
      query action($timestamp: Float!) {
        action(timestamp: $timestamp) {
          action
          timestamp
          object {
            filename
          }
        }
      }
    `}
  >
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error</p>;

      return (
        <Item.Group divided>
          {data.action.map(action => (
            <div>
              <ul>
                <li>{action.action}</li>
                <li>{action.timestamp}</li>
                <ul>
                  {action.object.map(obj => {
                    return <li>{obj.filename}</li>;
                  })}
                </ul>
              </ul>
            </div>
          ))}
        </Item.Group>
      );
    }}
  </Query>
);

export default UserList;

Answer 1

父组件包含“提交”按钮，并且存在生存状态。提交处理程序仅应使用... setState（）设置状态值-不能直接设置！

如果没有默认状态/值，请在未定义状态（时间戳）的情况下，在父渲染中使用条件渲染...占位符。如果值存在，则将其作为prop传递：

{!this.state.inputValue ? <SomePlaceholder />
: <UserList timestamp={this.state.inputValue} />}
// place input, submit button where you want (after/before results)

UserList将使用props调用-'props.timestamp'可以在graphql查询文字中使用。

当输入再次更改时，提交处理程序将更改父状态，并且该更改将再次作为prop传递给子对象，触发查询，然后重新呈现结果。

Answer 2

根据提供的信息，可能有几种方法可以满足您的需求。我想说UserList组件需要以某种方式有条件地呈现Query组件。也许UserList使用布尔属性isSubmitted，而isSubmitted为false时，UserList呈现一个div并带有解释提交查询的文本。可以通过UserList和“提交”按钮由具有state且包含isSubmitted属性的相同父组件来托管的操作来完成此操作。

ReactJS / GraphQL：通过提交按钮调用查询

2 个答案: