Question

我有一个按钮和一个文本栏。单击该按钮时，会将在文本栏中输入的网址发送到API并获取响应。我认为可以通过setState（）回调函数解决。但是我不知道如何实现它.....

 class App extends Component {
constructor() {
super();
this.state = {
input:'',
imageUrl:''
}
}
 onInputChange=(event) => {
 this.setState=({input: event.target.value});
 }
 onButtonSubmit = () => {
 app.models.predict(Clarifai.COLOR_MODEL,this.state.input).then(
    function(response) {
    console.log(response);
   },
    function(err) {
  // there was an error
}
);
}
 render() {

        <ImageLinkForm onInputChange={this.onInputChange} onButtonSubmit= 
 {this.onButtonSubmit} />       

    <FaceRecognition imageUrl={this.state.imageUrl} />
  </div>   
);
  }
}
 export default App;

Answer 1

下面是有关如何使用文本框中输入的URL发送http请求的演示。

请注意，您对setState的语法使用不正确。 setState是一个函数，应这样调用this.setState({ ... });

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ""
    };
  }
  
  onInputChange = event => {
    this.setState({ 
      input: event.target.value
    });
  };
  
  onButtonSubmit = () => {
    fetch(this.state.input)
      .then(() => {
        alert(`Success!`);
      })
      .catch((err) => {
        alert(`Failure: ${err}`);
      });
  };
  
  render() {
    return (
      <div>
          <input type="text" onChange={this.onInputChange}/>
          <button onClick={this.onButtonSubmit}>Submit URL</button>
      </div>
    );
  }
}


ReactDOM.render(
  <App/>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

使用React时如何解决400错误的请求错误？

1 个答案: