React Js：将条件传递给基于另一个状态值的状态值

Question

我一直在网上寻找答案，但我猜我所做的要么是错误的，要么是我不知道正确的温度，因为我找不到任何相关的答案。长话短说，我想将条件传递给基于构造函数内另一个状态值的状态值。为什么？因为我正在构建一个 "Form Generator" 并且我希望能够 link 对另一个输入。示例：如果选中了一个复选框，那么您可以在文本输入中输入文本，否则它会被禁用。很简单吧？如果有人能指出我的方向，那就太好了。到目前为止，这是我尝试过的方法，但没有用。

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: "" 
   }
]
}

我也尝试过在我的状态下创建一个约束对象并在安装过程中遍历该值，但我发现它太脆弱且耗时。如果我可以直接在输入对象中创建 link 就好了。

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

Answer 1

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

下面是如何将 disabled 属性 link 转换为另一个值的 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：将条件传递给基于另一个状态值的状态值

React Js : Passing a condition to a state value based on another state value

java

state

web

reactjs