Question

因此，我为应用程序设置了线框，基本上在各种组件发生变化时输入信息。

我目前有JSON file我正在使用

测试数据

我的React app：

/** @jsx React.DOM */

var BossBox = React.createClass({
    getBossList: function(){
        $.ajax({
          url: this.props.url,
          dataType: 'json',
          cache: false,
          success: function(data) {
            this.setState({bossData: data});
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
          }.bind(this)
        });
    },
    getBossItems: function(i) {
        this.setState({bossItems: i.selectedIndex})         
    },
    getInitialState: function() {
        return {
            bossData: {
                bosses: [],                
            },
            bossItems: {
                items: [],
            },
            selectedItems: {
                items: [],  
            },
            loading: {"done": false}
        };
    },
    componentWillMount: function() {
        this.getBossList();  
    },
    render: function() {
        return (
            <div className="container">
                <FilterMenu bossData={this.state.bossData} getBossItems={this.getBossItems} />
                <Display itemsData={this.state.bossItems} />
                <Script />
            </div>

        )
    }
});

var FilterMenu = React.createClass({
    render: function() {
        var bosses = this.props.bossData.bosses.map(function(boss, i) {
            return (
                <option key={i} value={boss}>{boss.name}</option>
            )
        });
        return (
            <div className="navbar navbar-inverse" style={{marginTop: 20 + 'px'}}>
                <form className="navbar-form">
                    <div className="row">
                        <div className="col-md-12">
                            <select className="form-control" defaultValue="0" onChange={this.props.getBossItems} id="select_difficulty" style={{width: 100 + '%'}}>
                                <option value="0"> --- Select Difficulty --- </option>
                                {bosses}
                            </select>
                        </div>
                    </div>
                </form>
            </div>

        )
    }
});

var Display = React.createClass({
    render: function() {
        return(
            <div className="row">
                <ItemList itemsData={this.props.itemsData} />
                <RollerList />
            </div>
        )
    }
});

var ItemList = React.createClass({
    render: function() {
        console.log(this.props.itemsData);
        var item_list = this.props.itemsData.items.map(function(item, i){
            return (
                <li className="list-group-item" key={i} data-color="success"><a href="#" rel={"item="+item.id+"&bonus="+item.bonus}>{item.name}</a></li>
            ) 
        });
        return(
            <div className="col-md-3">
                <div className="well" style={{maxHeight: 300 +'px', overflow: 'auto'}}>
                    <ul id="check-list-box" className="list-group checked-list-box">
                      {item_list}
                    </ul>
                    <br />
                    <button className="btn btn-primary col-xs-12" id="get-checked-data">Roll</button>
                </div>
                <pre id="display-json"></pre>
            </div>  
        )
    }
});

var RollerList = React.createClass({
    render: function() {
        return(
            <div className="col-md-9 well">
              <ul className="list-group">
                  <li className="list-group-item">
                      <h3><a href="#" rel="item=113937&bonus=566">Item 1</a></h3>
                          <ul className="list-unstyled">
                              <div className="alert alert-success">
                                  <li><h4>Winner: <small>Shobi - 92</small></h4> <a href="#" className="btn btn-success btn-sm btn-sm">Assign To Shobi</a><a href="#" className="btn btn-danger btn-sm">Pass Loot</a>
                                  </li>
                              </div>
                              <div className="alert alert-info">
                                  <li>#2: Panakamanana - 84 <a href="#" className="btn btn-success btn-sm">Assign To Panakamanana</a><a href="#" className="btn btn-danger btn-sm">Pass Loot</a>
                                  </li>
                                  <li>#3: Karamesh - 7 
                                      <a href="#" className="btn btn-success btn-sm">Assign To Karamesh</a><a href="#" className="btn btn-danger btn-sm">Pass Loot</a>
                                 </li>
                              </div>
                          </ul>

                  </li>
                  <li className="list-group-item">
                      <h3><a href="#" rel="item=113937&bonus=566">Item 3</a></h3>
                    <ul className="list-unstyled">
                              <div className="alert alert-success">
                                  <li><h4>Winner: <small>Artekho - 81</small></h4>
                                      <a href="#" className="btn btn-success btn-sm">Assign To Artekho</a><a href="#" className="btn btn-danger btn-sm">Pass Loot</a>
                                  </li>
                              </div>
                              <div className="alert alert-info">
                                  <li>#2: Fedorf - 34 <a href="#" className="btn btn-success btn-sm">Assign To Fedorf</a><a href="#" className="btn btn-danger btn-sm">Pass Loot</a>
                                  </li>
                              </div>

                          </ul>

                  </li>
              </ul>
          </div>
        )
    }
});

var Script = React.createClass({
    render: function(){
        return (
            <script src={this.props.script_url}></script>
        )
    }
});

React.render(
    <BossBox script_url="/static/js/check.js" url="/roller.json" />,
    document.getElementById('content')
)

我设法让选择框中的地图正常工作，它会返回我需要的信息。我想要做的是，当选择框更改时，使用所选值内的信息更新状态。

基本上它只是沿着json键向下移动。因此，例如，如果选择了bosses中的第一个索引，我需要它来更新itemsData状态以包含索引引用的bosses对象的内容。

对不起，如果这没有任何意义。我无法理解如何解释它。

Answer 1

要使用该值，我不确定您想要更改哪个州：

i.options[i.selectedIndex].value

或

i.target.value

Answer 2

如果你想从一个映射的输入元素中获取一个值，你可以参考这个例子：

class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          fruit: "banana",
        };
    
        this.handleChange = this.handleChange.bind(this);
      }
    
      handleChange(e) {
        console.log("Fruit Selected!!");
        this.setState({ fruit: e.target.value });
      }
    
      render() {
        return (
          <div id="App">
            <div className="select-container">
              <select value={this.state.fruit} onChange={this.handleChange}>
                {options.map((option) => (
                  <option value={option.value}>{option.label}</option>
                ))}
              </select>
            </div>
          </div>
        );
      }
    }
    
    export default App;

从映射的选择输入中获取选定的值

2 个答案: