Question

我有一个可以包含任意数量的子组件的组件，我希望这些包含输入字段的子组件在父组件中的状态发生更改时将这些输入字段设置为“disabled”。我一直在尝试使用React.cloneElement和React.Children.map修改子元素的属性，但它似乎没有影响任何内容。

这是一个简化版本：

# parent component
# assume that there's a @setState call in here somewhere
DisableableItem = React.createClass
  getInitialState: ->
    disabled: false
  render: ->
    <div>
      {
        React.Children.map @props.children, (child) =>
          React.cloneElement child, isDisabled: @state.disabled
      }
    </div>

# child component
ParameterizedOption = React.createClass
  getInitialState: ->
    disabled: @props.isDisabled
  render: ->
    <div className="parameterized-option">
      <label>{@props.text}</label>
      <div className="input-group input-group-sm">
        <input type={@props.inputType or "text"} className="form-control"
          placeholder={@props.initialInput or "00.00"}
          disabled={@state.disabled}></input>
      </div>
    </div>

并将其呈现为：

React.render <DisableableItem>
    <ParameterizedOption text="hey" isDisabled=false />
    <ParameterizedOption text="hey" isDisabled=false />
  </DisableableItem>, document.body

所以我console.log输出了输出，父节点中的状态在我想要的时候被修改了，但是孩子的道具没有被修改，因为我认为React.cloneElement调用会修改它们（它们在开始时总是假的）。我已经看了these questions，但我认为它们并不适用，因为DisableableItem不知道它的孩子是什么，直到他们被给予它对React.render的调用，因此无法将disabled={@state.disabled}作为子项属性之一。

我如何进入并修改这些孩子的状态？我误解了cloneElement应该做什么吗？

Answer 1

你将道具复制到州，这是一个不好的魔力。（https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html）

直接将props.disabled绑定到元素，而不是将其复制到状态。

您当前的代码：

getInitialState: ->
    disabled: @props.isDisabled

这只有在您确保更新state.disabled中的componentWillReceiveProps以反映传入的新props.disabled时才有效。

如果您以奇怪的方式做到这一点：https://jsfiddle.net/1t8ew85x/

如何与未指定数量的反应子组件进行交互

1 个答案: