小编Che*_*neZ的帖子

我有一个包含各种输入字段和两个按钮的表单; 一个用于提交,一个用于取消.

<form id="create-course-form">
  <input type="text" name="course_Name" ref="fieldName">
  <input type="text" name="course_org" ref="fieldOrg">
  <input type="text" name="course_Number" ref="fieldNum">

  <input type="submit" name="saveCourse" value="Create">
  <input type="button" name="cancelCourse" value="cancel" onClick={this.cancelCourse}>
</form>

我想要的是在单击取消按钮时清空所有输入.到目前为止,我已经设法通过使用每个输入的ref prop 来做到这一点.

cancelCourse(){
  this.refs.fieldName.value="";
  this.refs.fieldorg.value="";
  this.refs.fieldNum.value="";
}

但是,我想清空输入字段而不必单独清空每个输入字段.我想要类似的东西(jQuery):$('#create-course-form input[type=text]').val('');

我正在尝试在html页面中呈现react组件.我到目前为止所做的是实施这样的反应

var component =  React.createClass({
render: function(){
var testStyle = { fontSize: '18px', marginRight: '20px'};
return (
  <div>

    <h1>Hello React</h1>
    <div><ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul></div>
  </div>

  )

  }
  });

 ReactDOM.render(< component/>,
 document.getElementById('content')
 );

在HTML页面我有这个

<div id="content"></div>

当我检查HTMl页面时,我发现在div内部我有一个像这样的空组件

<component data-reactroot=""></component>

我在这做错了什么

我使用此URL http://192.168.33.10:8002/scenarios/创建了一个可以使用django-rest-framework创建的restful api,我正在创建一个React应用程序来调用api并消耗其数据.

我正在使用fetch来调用api

componentWillMount: function(){
 this.setState({Problemstyle: this.props.Problemstyle})
 fetch('http://192.168.33.10:8002/scenarios/')
 .then(result=>result.json())
 .then(result=> {
   this.steState({items:result})
 })
 },

当我运行我的应用程序时,我的浏览器出错

Fetch API无法加载http://192.168.33.10:8002/scenarios/.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许来源" http://192.168.33.10:8001 ".如果不透明响应满足您的需求,请将请求的模式设置为"no-cors"以获取禁用CORS的资源.

我不确定如何解决这个问题,因为我刚刚开始使用React