Meteor+React如何设置大量输入元素的值并在之后修改它们

Question

我对流星和反应很陌生。假设我在react组件中有以下内容：

getMeteorData() {
    var myForm = ProjectForm.findOne({_id:this.props.router.params._id});
    var projects = ProjectForm.find({});
    return {myForm:myForm,projects:projects};
    // doing a console.log(myForm); would give you something like
    /*
    input1:my text 1
    input2:some other text
    input3:something else
    etc....
    */
  },
  renderListProjects() {

    return this.data.projects.map(function(projectform,i) {
      return <li key={"li"+i}><a href={Meteor.absoluteUrl()+'project/' + projectform.username +'/' +projectform._id} key={"a"+i}>Project {projectform._id}</a></li>;
    });
  },
  getInitialState() {
     return Projects.findOne({this.props.router.params._id}, {sort: {createdAt: -1}});
  },
  render() {
    return (
      <div>
      <ul>{this.renderListProjects()}</ul>
      <form>
         <span>Hello this is some text</span>
         <input type="text" ref="input1" />
         <p>Blah blah this is boring</p>
         <input type="text" ref="input2" />
         <img src="image-of-a-kangaroo.png" />
         <input type="text" ref="input3" />
         <ul>
            <li>Buy brocolli</li>
            <li>Buy oregano</li>
            <li>Buy milk</li>
         </ul>
         <input type="text" ref="input4" />
         ...
         <textarea ref="input100"></textarea>
         <input type="text" ref="input101" />
         <p><strong>Yes, I like pizza!</strong>  But my porcupine gets sick eating pizza.</p>
         ...
      </form>
      </div>
    );

所需额外经费

>

如果有人从renderlistprojects单击link1，然后从renderlistprojects单击link2，则表单必须显示link2的projectform._id的值。

在DOM中，必须存在href=“project/_id”属性，以便进行SEO和遵循WCAG。

我尝试将renderListProjects重新定义为

  renderListProjects() {
    var pj = this
    return this.data.projects.map(function(projectform,i) {
      return <li key={"li"+i}><a onClick={pj.click(projectform._id)} href={Meteor.absoluteUrl()+'project/' + projectform.username +'/' +projectform._id} key={"a"+i}>Project {projectform._id}</a></li>;
    });
  },
click(id) {
    var currentApp = ProjectForm.findOne({_id:id}, {sort: {createdAt: -1}});
    this.setState({input36:input36});
  },

但是当我运行我的Meteor+React项目时，我的浏览器崩溃了，因为某种无限循环正在发生。

Answer 1

您所创建的是React调用的受控输入。这意味着React已经在输入中声明了与This.data.myform.input1指向的任何相对应的值。

为了能够更改输入字段，您需要做的是添加一个负责更新值的onChange处理程序。文档非常简单，但我在下面添加了一个小示例来说明它。

class Form extends React.Component {
  constructor() {
    super();
    this.state = {
      myForm: {
        inputs: [
          {value: 1}, {value: 2}, {value: 3}
        ]
      }
    };
  }
  onChange = (index, event) => {
    let inputs = this.state.myForm.inputs.slice(0);
    inputs[index] = {
      value: parseInt(event.target.value, 10)
    };

    this.setState({
      myForm: {
        inputs: inputs
      }
    })
  }
  render() {
    return (<form>
      {this.state.myForm.inputs.map((input, index) => {
        return (<input onChange={this.onChange.bind(null, index)} value={input.value} key={index} />);
      }, this)}
      </form>);
  }
};

ReactDOM.render(<Form />, document.querySelector('#c'));