Как получить значение дочернего элемента при рендеринге в React?

Question

Я хотел бы автоматически вставить свойство value='foo' в элемент option, чтобы я мог легко выбрать вариант из сохраненного состояния, если элемент повторно отображает.

В настоящее время я могу добавить значение вручную, и он работает, но я попытался автоматизировать это, когда вы делаете такие дети. Однако я не могу найти значение. Есть идеи?

// form.jsx 
<Select 
    label='Select a thing' 
    name='things' 
    updateForm={update} 
    formState={fstate}> 

    <option>Foo</option> 
    <option>Bar</option> 
    <option>Baz</option> 
</Select> 


// Select.jsx 

Select = React.createClass({ 

    // pass this.name down to this.props.children manually 
    renderChildren: function() { 
    return React.Children.map(this.props.children, function (child) { 
     debugger 
     // can't find "foo", "bar" here 
     return React.addons.cloneWithProps(child, { 
     name: this.props.name, 
     value: (get child value) 
     }); 
    }.bind(this)); 
    }, 

    handleChange(e) { 
    var value = e.currentTarget.value; 
    // save to db and save to formState 
    this.props.updateForm(this.props.name, value); 
    }, 

    render() { 
    return (
     <div> 
     <label>{ this.props.label }</label> 

     <select 
      onChange={this.handleChange} 
      defaultValue={ this.props.formState[this.props.name] }> 

      { this.renderChildren() } 
     </select> 
     </div> 
    ); 
    } 

}); 


// render this HTML 

<div> 
    <label>Select a thing</label> 

    <select class="form-control" > 
    <option name="thing" value="foo">foo</option> 
    <option name="thing" value="bar">bar</option> 
    <option name="thing" value="baz">baz</option> 
    </select> 
</div> 

Answer 1

Дети Select элемента представляют собой список option, для получения значений внутри вы просто должны проверить на детях каждого элемента.

return React.Children.map(this.props.children, function(child) { 
    // can't find "foo", "bar" here 
    return React.addons.cloneWithProps(child, { 
    name: this.props.name, 
    value: child.props.children 
    }); 
}.bind(this)); 

Если содержание опции только текст, который вы можете получить доступ к нему непосредственно с атрибутом child.props.children.

Например.

<option>Bar</option> 

Если содержание является более сложным (опция не должна иметь каких-либо HTML тег внутри, но, может быть, по какой-то причине вам это нужно), вы должны проверить значение и добавить некоторую логику

<option>Foo <span>bar</span></option> 

с простым console.log(child.props.children) вы можете увидеть структуру дочернего элемента.