Question

我想为单击“添加输入字段”按钮的每一次显示一个输入字段。现在，当我单击按钮“添加输入字段”时，它仅显示一次。我该如何实现。

在下面，我创建了一个codeandbox。 https://codesandbox.io/s/6lr8w994vn

Answer 1

要实现此目的，您将必须在状态下存储一个数组，其中包含用于生成每个字段的信息。

然后，在您的add函数中，将数组设置为解构的先前数组，以及其他元素：

class InputAdder extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            inputs: []
        }
    }

    addInput = ev => {
        this.setState(prev => ({ inputs: [...prev.inputs, 'Hi'] }))
    }

    render() {
        return (
            <div>
                <button onClick={this.addInput}>Add input</button>
                {this.state.inputs.map(node => <input type="text"/>)}
            </div>
        )
    }
}

ReactDOM.render(<InputAdder/>, document.getElementById('root'))

input {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
<div id='root'>

然后您只需要在render函数中映射数组即可

Answer 2

一种方法是在状态下存储输入数量，每次单击将增加一。然后将此值传递给组件的props并使用map函数创建相应数量的输入。

Answer 3

要执行此操作，请从以下位置更改状态：

this.state = {
   add: false,
   addChild: false
};

至：

this.state = {
  add: [],
  addChild: []
};

，并且在addInputField函数中，每次单击时都会增加add数组大小，然后使用this.state.add呈现输入字段。同样适用于儿童。

演示组件：

class Demo extends Component {
  constructor() {
    super();
    this.state = {
      add: [],
      addChild: []
    };
  }
  addInputField = event => {
    const add = this.state.add;
    const size = add.length + 1;
    add.push(size);
    this.setState({
      add
    });
    event.preventDefault();
  };

  addChildInputField = event => {
    const addChild = this.state.addChild;
    const size = addChild.length + 1;
    addChild.push(size);
    this.setState({
      addChild
    });
    event.preventDefault();
  };

  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };
  render() {
    return (
      <div>
        <Grid>
          <Grid>
            <Button onClick={this.addInputField} style={{ marginTop: 30 }}>
              {" "}
              <Icon>
                <AddCircle />
              </Icon>{" "}
              Add Input Field
            </Button>
            {this.state.add.map(index => {
              return (
                <Grid>
                  <TextField
                    id="preference"
                    label="Preference"
                    name="points"
                    value={this.state.name}
                    onChange={this.handleChange}
                    margin="normal"
                  />
                  <Button onClick={this.addChildInputField}> Add Child</Button>
                </Grid>
              );
            })}
            {this.state.addChild.map(index => {
              return (
                <Grid style={{ marginLeft: 50 }}>
                  <TextField
                    id="preference"
                    label="Child Preference"
                    name="points"
                    value={this.state.name}
                    onChange={this.handleChange}
                    margin="normal"
                  />
                </Grid>
              );
            })}
          </Grid>
          <Grid>
            <Button
              color="primary"
              variant="contained"
              type="submit"
              style={{ margin: "0.2rem", marginTop: 30 }}
            >
              Save
            </Button>
          </Grid>
        </Grid>
      </div>
    );
  }
}

export default Demo;

Full code available here 希望对您有所帮助。

如何在React JS中为按钮的每次单击显示输入字段？

3 个答案: