Question

我会在问题的最后显示整个代码。但我想关注的是我的App.jsx反应组件中的渲染功能

render() {
    return (
      <div className="container">
          <ul>
            {this.renderListApplications()}
          </ul>
          <div>{JSON.stringify(this.data.currentApplication)}</div>
          <form className="new-task" onSubmit={this.handleSubmit} >
            <input ref="input_36" id="input_36" type="text" value={this.state.input_36} onChange={this.handleChange} />
            <input ref="input_37" id="input_37" type="text" value={this.state.input_37} onChange={this.handleChange} />
            <textarea ref="input_38" id="input_38" onChange={this.handleChange} value={this.state.input_38} />
            <textarea ref="input_39" id="input_39" onChange={this.handleChange} value={this.state.input_39} />
            <input ref="input_40" id="input_40" type="text" value={this.state.input_40} onChange={this.handleChange} />
            <button type="submit">Submit</button>
          </form>
      </div>
    );
}

我觉得ref="input_36" id="input_36" type="text" value={this.state.input_36} onChange={this.handleChange}过于冗长。如果我有大约300个其他输入，textarea，选择穿插在一大堆其他html元素之间的字段，我希望尽可能减少输入的数量。有没有更方便的方法来以编程方式设置输入，textarea和选择字段的一些属性和事件处理程序？或者在某处设置反应默认某些东西？或者只是某种方式让事情变得不那么冗长？

如果这是PHP，我将所有的html代码放入form.html，然后我以编程方式将所有这些属性设置为：

/* I could simplify this code even more, but I'm making it verbose so you understand what I'm trying to achieve. */
$htmlForm = new DOMDocument();
$htmlForm->loadHTMLFile('form.html');
foreach ($htmlForm->getElementsByTagName('input') as $i)
{
    $i->setAttribute('value',$arrState[$i->getAttribute('name')]);
    $i->setAttribute('onChange','javascript:somefunction()');
    etc...
}
foreach ($htmlForm->getElementsByTagName('textarea') as $i)
{
    $i->nodeValue = $arrState[$i->getAttribute('name')];
    $i->setAttribute('onChange','javascript:somefunction()');
    etc...
}

当我尝试使用各种方法在React和JS中以编程方式设置这些属性时，我不断遇到任何DOM或元素或任何不存在的错误，或者我的应用程序会崩溃等等。如果有人能告诉我一个如何使这个更简洁的例子，那就太好了。

现在这里是我的完整App.jsx文件。

App = React.createClass({
  mixins: [ReactMeteorData],

  getMeteorData() {
    return {
      applications: Applications.find({}, {sort: {createdAt: -1}}).fetch(),
      currentApplication: Applications.findOne({_id:this.props.router.params.appid}, {sort: {createdAt: -1}}),
    }
  },
  getInitialState: function() {
    return this.loadForm(this.props.router.params.appid);
  },
  loadForm(appId) {
    var currentApp = Applications.findOne({_id:appId});
    if(!currentApp) currentApp = {};
    return currentApp;
  },
  clickLoadForm(appId)
  {
    var currentApp = this.loadForm(appId);
    var state = new Object();
    var refs = this.refs;
    Object.keys(refs).map(function(prop,index){
      state[prop] = typeof currentApp[prop] == 'undefined' ? "" : currentApp[prop];
    });
    this.setState(state);
  },
  renderListApplications() {
    var _this = this;
    return this.data.applications.map(function(applicationform,i) {
      return <li key={"li"+i}><a onClick={_this.clickLoadForm.bind(_this,applicationform._id)} href={Meteor.absoluteUrl()+'application/' +applicationform._id} key={"a"+i}>Version {applicationform._id}</a></li>;
    });
  },
  handleSubmit(event) {
    event.preventDefault();
    var refs = this.refs;
    var formVals = new Object();
    Object.keys(refs).map(function(prop, index){
      if(refs[prop].nodeName.match(/(INPUT|SELECT|TEXTAREA)/).length > 0)
        formVals[prop] = refs[prop].value;
    });

    Meteor.call("saveApplication", formVals);

  },
  handleChange: function(e) {
    if(!e.target.id) return;
    if(typeof e.target.id == 'undefined') return;
    var state = new Object();
    state[e.target.id] = e.target.value;

    this.setState(state);
  },
  render() {
    return (
      <div className="container">
          <ul>
            {this.renderListApplications()}
          </ul>
          <div>{JSON.stringify(this.data.currentApplication)}</div>
          <form className="new-task" onSubmit={this.handleSubmit} >
            <input ref="input_36" id="input_36" type="text" value={this.state.input_36} onChange={this.handleChange} />
            <input ref="input_37" id="input_37" type="text" value={this.state.input_37} onChange={this.handleChange} />
            <textarea ref="input_38" id="input_38" onChange={this.handleChange} value={this.state.input_38} />
            <textarea ref="input_39" id="input_39" onChange={this.handleChange} value={this.state.input_39} />
            <input ref="input_40" id="input_40" type="text" value={this.state.input_40} onChange={this.handleChange} />
            <button type="submit">Submit</button>
          </form>
      </div>
    );
  }
});

备注

即使有值，我希望能够编辑表单字段在其中
当有人点击renderListApplications的链接时，我希望表单重新呈现与相应的相关值 url中的:appid

Answer 1

如果有300个字段，kadrian的答案不能解决问题。你仍然有300行，你不能在其他地方建立。我建议map：

render() {

const inputs = [
    [ 12, 'text', this.handle1 ],
    [ 13, 'password', this.handle1 ],
    [ 14, 'textarea', this.handle1 ]
];

return <div>
    <form> {
        inputs.map( ( input ) => <ReactComponents.input
            key={ index }
            ref={ input[ 0 ] }
            data={ input }
        />; )
    } </form>
</div>;

管理所有用例的组件：

ReactComponents.input = ...
...
    render() {
        ...
        if( this.props.data[ 1 ] === 'textarea' )
            return <textarea
                ...
            />
        return <input
            type={ this.props.data[ 1 ] }
            ref={ this.props.data[ 0 ] }
            key={ this.props.data[ 0 ] }
            onChange={ this.props.data[ 2 ] }
            ...
        />
}

所以你可以在其他地方（在x-config文件中？）构建你的inputs数组，然后传递它来构建视图中的所有内容。

Answer 2

您可以在组件中创建构建UI部分的功能（如工厂）。这是一个例子：

$('input').nextAll('.price').first();

使反应组分更简洁

2 个答案: