使用参考

Question

使用参考将我的输入文本字段设置为空白时，我遇到了问题。您可以想到我的UI，就像一个收件箱应用程序。当我单击侧面板时，通过单击openIssue()中的问题，使用功能<IssueDetails/>在<IssueList/>中显示问题。我的问题是，当我在输入文本字段中输入值时。在<IssueList/>中单击一个新期刊后，该值将继续用于下一个期刊的文本输入值。

我已将以下内容用作指导：Clear an input field with Reactjs?，https://reactjs.org/docs/refs-and-the-dom.html，但是，我遇到的是TypeError：无法设置未定义的属性'value'，我该如何克服？

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoaded: false,
      issues: [],
      counter: 0,
      selectedIssueId: 0,
      currentSection: "inbox",
      showIssueBox: true
    };

    this.sendThru = this.sendThru.bind(this);
  }

  openIssue(id) {
    const issues = this.state.issues;
    let copyOfStateIssues = issues.slice();

    let modifiedStateWithHighlight = copyOfStateIssues.map(obj => {
      if (obj.id !== id) {
        obj.highlighted = false;
      } else {
        obj.highlighted = true;
      }
      return obj;
    });

    this.setState({
      selectedIssueId: id,
      modifiedStateWithHighlight,
      issues: modifiedStateWithHighlight
    });

    this.sendThru();
  }

  sendThru(el) {
    this.inputTitle.value = "";
  }

  render() {
    return (
      <div className="App">
        {this.state.showIssueBox ? (
          <IssueBox
            issues={this.state.issues}
            selectedIssueId={this.state.selectedIssueId}
            onIssueSelected={id => {
              this.openIssue(id);
            }}
            inputRef={el => (this.inputTitle = el)}
          />
        ) : (
          <div />
        )}
      </div>
    );
  }
}

class IssueBox extends Component {
  render() {
    const currentIssue = this.props.issues.find(
      x => x.id === this.props.selectedIssueId
    );

    return (
      <div className="wrapper">
        <div className="inbox-container">
          <IssueList
            issues={this.props.issues}
            onIssueSelected={this.props.onIssueSelected}
            selectedIssueId={this.props.selectedIssueId}
          />
          <IssueDetails
            issues={this.props.issues}
            issue={currentIssue}
            onInputRef={this.props.inputRef}
          />
        </div>
      </div>
    );
  }
}

class IssueDetails extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentPage: 1,
      urlsPerPage: 5,
      activeItem: 0
    };
  }

  render() {
    const issueDummy = currentURLs.map((obj, i) => {
      const noIssueID = (
        <input
          ref={this.props.onInputRef}
          type="text"
          onChange={this.props.onInputUpdate.bind(this, obj)}
        />
      );

      return (
        <tr role="row" key={i}>
          <td role="cell" style={td4Styles}>
            {issue.verified === true ? hasIssueID : noIssueID}
          </td>
        </tr>
      );
    });

    return (
      <div className="issue-content">
        <div className="issue-content__message">
          <div className="url_div_container">
            <form
              onSubmit={this.props.onVerifiationSubmission.bind(this, issue)}
            >
              <table>
                <tbody className="group-row">{issueDummy}</tbody>
              </table>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

我的目标是在我单击<IssueList>中的新问题（由openIssue（）触发）后，清除先前输入的文本输入字段。因此，为< IssueDetails>

呈现了一组新的问题和文本输入字段