Question

我有两个功能，displayElements和handleSubmit。我还在UI中呈现日期输入字段。我想做的是通过调用displayElements显示“提交”按钮事件的结果。

displayElements函数：

displayElements(){
        var data = this.props.getObjectsQuery;
        console.log(this.props);
        {({ 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) => {//the map functions iterates through the array to access each item in the array.
                    return (<li>{obj.filename}</li>)
                  })}
                  </ul>
                  </ul>
                </div>
              )}

              </Item.Group>


            );
        }
      }
    }

handleSubmit

handleSubmit = event => {
        event.preventDefault();

        console.log(this.state);
        this.setState({
          startTime: new Date(document.getElementById("startTime").value).valueOf(),//getElementById is a jQuery method
          endTime: new Date(document.getElementById("endTime").value).valueOf()
        }, () => {
          this.props.data.refetch({//Assign the inputvalues, which is the current state, to the variables after pressing the submit button
            startTime: this.state.startTime,
            endTime:this.state.endTime
          });
          console.log(this.state.startTime);
          console.log(this.state.endTime);
        });
      };

渲染功能

render（）{

console.log(this.props);
return (
  <div className="Calendar">
    <form onSubmit={this.handleSubmit.bind(this)}>
      <label>Start Time</label>
      <input type="datetime-local" id="startTime" step="1" />              



      <label>End Time</label>
      <input type="datetime-local" id="endTime" step="1" onSubmit={this.handleSubmit.bind(this)}/>
      <input type="submit" value="Submit" />
       {this.displayElements()}
    </form>

  </div>

);

}

Answer 1

您将需要在displayElements方法中调用render。

您在屏幕上看不到任何内容的原因是，此功能未在渲染器中的任何地方调用。

Answer 2

您的displayElements不返回任何内容。在displayElements函数中，您还有另一个函数正在返回您的元素。但实际上并没有返回到displayElements函数。

displayElements() {
// var data = this.props.getObjectsQuery;

const { loading, error, data } = this.state;

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 => {
                            //the map functions iterates through the array to access each item in the array.
                            return <li>{obj.filename}</li>;
                        })}
                    </ul>
                </ul>
            </div>
        ))}
    </Item.Group>
    );
}

ReactJS / Javascript：在屏幕上呈现项目列表

2 个答案: