javascript - 渲染之外的 DOM 操作

Question

我是 React 的新手，尝试使用一个 API 进行简单的登录连接。连接工作正常，所以我想在登录失败时创建一个 div。

例如警报(“NOT LOGIN”)后的一个 div“Bad user or password”

我阅读了 stackoverflow 和 React 文档，但我有疑问，因为我想在渲染器之外操作 DOM。

例如这段代码:

render() {
  var renderedOutput = arr.map(item => <div> {item} </div>)

  return (
    <div>
      {renderedOutput}
    </div>
  );
}

像这样的变种。也许是一个非常初学者的错误，但我被卡住了。感谢您的帮助，对问题深表歉意。

import *;

class App extends Component {
  handleSubmit = e => {
    e.preventDefault();

    const user = {
      usuario: this.usuario.value,
      contraseña: this.password.value
    };

    axios.post(`http://api`, user).then(res => {
      this.setState({
        data: res.data,
        loading: true
      });

      if (Object.keys(res.data).length > 0) {
        alert("LOGIN");
      } else {
        alert("NOT LOGIN");
      }

      console.log(res.data);
    });
  }

  render() {
    return (
      <Container>
        <Form onSubmit={this.handleSubmit}>
          <Row>
            <Col md="4"> </Col>{" "}
            <Col md="4">
              <Card>
                <CardBody>
                  <FormGroup>
                    <InputGroup>
                      <InputGroupAddon addonType="append">
                        <InputGroupText>
                          <FontAwesomeIcon icon={faUser} />{" "}
                        </InputGroupText>{" "}
                      </InputGroupAddon>{" "}
                      <Input
                        placeholder="Usuario"
                        type="text"
                        innerRef={element => {
                          this.usuario = element;
                        }}
                      />{" "}
                    </InputGroup>{" "}
                  </FormGroup>
                  <FormGroup>
                    <InputGroup>
                      <InputGroupAddon addonType="append">
                        <InputGroupText>
                          <FontAwesomeIcon icon={faKey} />{" "}
                        </InputGroupText>{" "}
                      </InputGroupAddon>{" "}
                      <Input
                        placeholder="Password"
                        type="password"
                        innerRef={element => {
                          this.password = element;
                        }}
                      />{" "}
                    </InputGroup>{" "}
                  </FormGroup>
                  <Row>
                    <Col md="8"> </Col>{" "}
                    <Col md="4">
                      <Button color="success"> Login </Button>{" "}
                    </Col>{" "}
                  </Row>{" "}
                </CardBody>{" "}
              </Card>{" "}
            </Col>{" "}
            <Col md="4"> </Col>{" "}
          </Row>{" "}
        </Form>
      </Container>
    );
  }
}

export default App;

Answer 1

对于此类问题，您不必进行任何手动 DOM 操作。执行此操作的“正确”方法是在异步请求完成后更新状态 (setState)，这将触发重新呈现。如果请求失败，您可以存储错误，如果请求成功则清除它们(您也可能在成功登录后离开此页面，但这超出了范围)。

这是一个简单的工作示例，应该演示如何有条件地呈现错误。 (因为这是一个示例，所以您在表单中输入的内容并不重要 - 单击“提交”以发出将出现 404 并更新状态并出现错误的请求)。

class Example extends React.Component {
  constructor (props) {
    super(props)

    this.state = {errors: []}
  }

  setErrors = (...errors) => {
    this.setState({errors})
  }

  submitForm = () => {
    // intentionally return a 404 as an example
    // change to false to mock a valid ajax request
    const hasError = true
    
    axios.get(`https://jsonplaceholder.typicode.com/${
    hasError ? 'fake' : 'todos/1'}`)
      .then(() => {
        this.setErrors()
      })
      .catch(() => {
        this.setErrors('Invalid Email Or Password')
      })
  
  }

  render () {
    return (
      <div>
        <div style={{color: 'red'}}>
          {this.state.errors.map(e => <div>{e}</div>)}
        </div>
        <div><label>Email<input type="email" /></label></div>
        <div><label>Password<input type="password" /></label></div>
        <button type="button" onClick={this.submitForm}>Submit</button>
      </div>
    )
  }
}

ReactDOM.render(<Example />, document.querySelector('#app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>

<div id="app"></div>