Question

我一直在互联网上寻找答案，但是我的猜测是我在做错了或者我不知道正确的答案，因为我找不到任何相关的答案。长话短说，我想将条件传递给基于构造函数内另一个状态值的状态值。为什么？因为我正在构建“表单生成器”，并且希望能够将输入链接到另一个输入。示例：如果选中了复选框，则可以在文本输入中输入文本，否则将其禁用。很简单吧？如果有人能指出我的方向，那将是很棒的。到目前为止，这是我尝试过的方法，但是没有用。

constructor(props){

this.state = 
Inputs : [
  //Theres a bunch of inputs here
  {
     name : "Icon",
     group: 1,
     width: 6,
     type: "select",
     label: "Icon du menu",
     disabled: () =>(
          !this.state.Inputs[0].value //I want to link the disable property to an
                                      //input value
     ),
      value: "" 
   }
]
}

我也曾尝试在状态下创建约束对象，并在安装过程中遍历该值，但我发现它太脆弱且耗时。如果我可以直接在输入对象内创建链接，那将是很好的。

感谢您的宝贵时间和智慧！
-山姆

Answer 1

您将希望初始索引[0]具有与!this.state.Inputs[0].value不同的禁用功能，否则所有输入的disable属性将被卡住并且永不更改。

此处演示了如何将disabled属性链接到另一个属性的input值：

class App extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      inputs: [
        {
          name : "Form1",
          disabled: () => { return false; },
          value: "" 
        },
        {
          name : "Form2",
          disabled: () => { return this.state.inputs[0].value === ""; },
          value: "" 
        },
        {
          name : "Form3",
          disabled: () => { return this.state.inputs[0].value === ""; },
          value: "" 
        }
      ]
    };
  }
  
  onInputChange = (e, index) => {
    const newInputs = this.state.inputs;
    newInputs[index].value = e.target.value;
    this.setState({ inputs: newInputs });
  };
  
  render() {
    return (
      <div>
        {this.state.inputs && 
            this.state.inputs.map((inputItem, index) => {
                return (
                  <div>
                    {this.state.inputs[index].name}:
                    <input onChange={(e) => { this.onInputChange(e, index); }} disabled={this.state.inputs[index].disabled()}/>
                  </div>
                );
            })}
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App/>,
  document.getElementById("react")
);

<div id="react"></div>
<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>

在演示中，如果您对第一个输入有一个空字符串以外的值，它将为用户输入解锁其余输入。

React Js：根据另一个状态值将条件传递给状态值

1 个答案: