Question

我的页面上有一个空的链接数组和三个输入字段。我想在状态变量link []中的一个数组中获取所有三个输入字段的值，以便可以将链接数组发送到数据库。就像您看到的那样，我正在使用语义ui，但是对于输入字段，只有可以使用的onChange函数

我该怎么做？

export default class Dashboard extends Component {
    constructor() {
        super();

        this.state = {          
            link : []          
        };

render() {
        
        
        return (
            <Grid style={{ height: "100%" }}>
                <Grid.Column width={6} className='dashboardCard'>
                    <Card fluid>
                        <Card.Content >
                            <Card.Header>Allgemeine Künstler-Daten</Card.Header>
                            <Card.Description>
                                "Strange Fruit" is a song performed most famously by Billie
                                Holiday, who first sang and recorded it in 1939.
                            </Card.Description>
                        </Card.Content>
                        <Card.Content extra textAlign="center">
                            <Form onSubmit={this.handleSubmit} >
                                <Input
                                    fluid
                                    label="Social Link 1"
                                    placeholder="www.twitter.com/artist"
                                    style={{ margin: "1rem" }}
                                    width={6}
                                    name="link"
                                    value={this.state.link}
                                    onChange={this.handleInputChange}
                                />
                                <Input
                                    fluid
                                    label="Social Link 2"
                                    placeholder="www.soundcloud.com/artist"
                                    style={{ margin: "1rem" }}
                                    width={6}
                                    name="link"
                                    value={this.state.link}
                                    onChange={this.handleInputChange}
                                />
                                <Input
                                    fluid
                                    label="Social Link 3"
                                  placeholder="www.facebook.com/artist"
                                    style={{ margin: "1rem" }}
                                    width={6}
                                    name="link"
                                    value={this.state.link}
                                    onChange={this.handleInputChange}
                                />
                                <Dropdown
                                <Form.Button positive     
                                      value="Submit">Save</Form.Button>
                            </Form>
                        </Card.Content>
                    </Card>
                </Grid.Column>
                <Grid.Column columns={5} />
            </Grid>
        );
    }

Answer 1

我建议不要将链接存储在数组中，而是将其存储为组件状态下具有不同键的单独值。这样，如果用户更改了某些内容，您将知道要更新哪个链接。使用<input> name属性，使键处于与呈现的输入相对应的状态。如果您还有其他状态数据，也可以方便地将所有来自表单的数据包装在状态中的formOptions键中。

您可以执行以下操作：

constructor() {
  super();
  this.state = {
    formOptions: {
      link1: '',
      link2: '',
      link3: ''
    }
  };
}

handleInputChange = event => {
  const { name, value } = event.target;
  const { formOptions } = this.state;
  formOptions[name] = value;
  this.setState({ formOptions });
}

然后只需为您的输入提供名称属性link1，link2和link3。

然后，在handleSubmit方法中，如果需要的话，可以将单独的链接转换为单个数组。

请注意，方法handleInputChange必须作为分配给箭头函数的属性编写，以将this绑定到组件，以便可以访问状态。另外，您可以正常定义handleInputChange，然后在每个输入的onChange中放置this.handleInputChange.bind(this)，但我发现第一种方法更简洁。

反应-用输入值填充状态数组

1 个答案: