如何在defaultChecked - React中引用当前元素

Question

我有一个动态数组a [1,3]我有3个复选框，它们有名称和值，我想根据动态数组a默认检查它们。我想在defaultCheck里面传递每个当前孩子的值（通过引用而不是手动的实际数字（1,2,3））。这可能吗？

像defaultChecked = {giveCheck（self.value）之类的东西，并在开头执行，以便复选框获得默认检查状态

<input type="checkbox" name="a" value="1" defaultChecked={giveCheck(self.value}/>
<input type="checkbox" name="a" value="2" defaultChecked={giveCheck(self.value}/>
<input type="checkbox" name="a" value="3" defaultChecked={giveCheck(self.value}/>


giveCheck(value) {
if(a.indexOf(value)>=0){
return true;
}
return false;
}

Answer 1

Old answer

是的，这绝对是可能的。在下面的示例中，我将数组存储在状态中，并且对于您检入的每个输入，该值都存在于数组中。如果你愿意，你可以使用indexOf()，但我更喜欢includes()，因为它在所有主流浏览器上都受支持。

此外，您可能希望将name属性更改为唯一。

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      a: [1,3]
    };
  }
 
  render() {
    return(
      <div>
        <input type="checkbox" name="a" value="1" defaultChecked={this.state.a.includes(1)} />
        <input type="checkbox" name="b" value="2" defaultChecked={this.state.a.includes(2)} />
        <input type="checkbox" name="c" value="3" defaultChecked={this.state.a.includes(3)} />
      </div>
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

---

如果您有超过3个元素（比如50）并且代码可读性是一个问题，您可以在循环中生成输入：

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      a: [1,3]
    };
  }
 
  render() {
    return(
      <div>
        {[...Array(50)].map(
          (v, i) => {
            return <input type="checkbox" name={"a"+i} value={i+1} defaultChecked={this.state.a.includes(i+1)} />
          })
        }
      </div>
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

---

New answer

简短的回答是：不，在呈现组件之前，您无法读取值的属性。基本上你要问的是代码读取你之前在代码中写的内容。与在运行时触发的事件不同，这必须在执行时发生。

你显然可以只写两次数字：

<input type="checkbox" name="a" value="3" defaultChecked={giveCheck(3)}/>

但如果您不想这样做，请创建一个返回输入元素的函数。这也消除了对“检查器”功能的需要 - 只需在一个功能中完成所有操作。这样，您输入一次值，但可以返回在两个位置使用该参数的代码：

class MyApp extends React.Component {
  
  constructor() {
    super();
    this.state = {
      a: [1,3]
    };
  }
  
  renderInput(value) {
    return <input type="checkbox" name="a" value={value} defaultChecked={this.state.a.includes(value)} /> 
  }
 
  render() {
    return(
      <div>
        {this.renderInput(1)}
        {this.renderInput(2)}
        {this.renderInput(3)}
      </div>
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>