Question

我正在创建一个pokedex，但在此过程中我无法添加图片。它似乎工作的唯一时间是我通过函数show_image传递它，但只有在我使用document.body时才有效。我是新来的反应所以检查我的代码，如果你发现任何有用的工作，我很感激。

编辑：忽略break标记（在从pokedex添加不同属性时使用它），并忽略该函数。我只是和他们一起玩，以了解不同的选择。

import React from 'react';
import Data from './pokeapi_testex.js';

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    var foo = document.getElementById("inner-screen");
    event.preventDefault();

    // function show_image(src, width, height, alt) {
    //     var img = document.createElement("img");
    //     img.src = src;
    //     img.width = width;
    //     img.height = height;
    //     img.alt = alt;
    //
    //     // This next line will just add it to the <body> tag
    //     document.getElementById("inner-screen").innerHTML =
    // }

    var inputval = this.state.value.toLowerCase();
    var data_map = Data.forEach(function(i){
      if(inputval === i.name){
        foo.innerHTML = i.element_type + "<br>";
      }
    })
  }

  render() {
    return (
      <form id="colored" onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default NameForm;

创建pokedex，无法添加图像

0 个答案: