相关疑难解决方法(0)

我有一个简单的反应组件,我相信有一个受控输入的形式:

import React from 'react';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
            </form>
        )
    }

    onFieldChange(fieldName) {
        return function (event) {
            this.setState({[fieldName]: event.target.value});
        }
    }
}

export default MyForm;

当我运行我的应用程序时,我收到以下警告:

警告:MyForm正在更改要控制的类型文本的不受控制的输入.输入元素不应从不受控制切换到受控制(或反之亦然).决定在组件的使用寿命期间使用受控或不受控制的输入元素

我相信我的输入是有控制的,因为它有一个值.我想知道我做错了什么？

我正在使用React 15.1.0

我正在尝试使用react创建一个简单的表单,但是在数据正确绑定到表单的defaultValue时遇到困难.

我正在寻找的行为是这样的:

1. 当我打开我的页面时,文本输入字段应该填入我的数据库中的AwayMessage文本.那就是"示例文本"
2. 理想情况下,如果我的数据库中的AwayMessage没有文本,我想在Text输入字段中有一个占位符.

但是,现在,我发现每次刷新页面时Text输入字段都是空白的.(虽然我在输入中键入的内容确实保存并保持不变.)我认为这是因为输入文本字段的html在AwayMessage为空对象时加载,但在farMessage加载时不刷新.此外,我无法为该字段指定默认值.

为清晰起见,我删除了一些代码(即onToggleChange)

    window.Pages ||= {}

    Pages.AwayMessages = React.createClass

      getInitialState: ->
        App.API.fetchAwayMessage (data) =>
        @setState awayMessage:data.away_message
        {awayMessage: {}}

      onTextChange: (event) ->
        console.log "VALUE", event.target.value

      onSubmit: (e) ->
        window.a = @
        e.preventDefault()
        awayMessage = {}
        awayMessage["master_toggle"]=@refs["master_toggle"].getDOMNode().checked
        console.log "value of text", @refs["text"].getDOMNode().value
        awayMessage["text"]=@refs["text"].getDOMNode().value
        @awayMessage(awayMessage)

      awayMessage: (awayMessage)->
        console.log "I'm saving", awayMessage
        App.API.saveAwayMessage awayMessage, (data) =>
          if data.status == 'ok'
            App.modal.closeModal()
            notificationActions.notify("Away Message saved.")
            @setState awayMessage:awayMessage

      render: ->
        console.log "AWAY_MESSAGE", this.state.awayMessage
        awayMessageText = if this.state.awayMessage then this.state.awayMessage.text else "Placeholder Text"
        `<div …

我的联系页面表格如下,

<form name="contactform" onSubmit={this.contactSubmit.bind(this)}>
  <div className="col-md-6">
    <fieldset>
      <input ref="name" type="text" size="30" placeholder="Name"/>
      <br/>
      <input refs="email" type="text" size="30" placeholder="Email"/>
      <br/>
      <input refs="phone" type="text" size="30" placeholder="Phone"/>
      <br/>
      <input refs="address" type="text" size="30" placeholder="Address"/>
      <br/>
    </fieldset>
  </div>
  <div className="col-md-6">
    <fieldset>
      <textarea refs="message" cols="40" rows="20"
                className="comments" placeholder="Message"/>
    </fieldset>
  </div>
  <div className="col-md-12">
    <fieldset>
      <button className="btn btn-lg pro" id="submit"
              value="Submit">Send Message</button>
    </fieldset>
  </div>
</form>

需要为所有字段添加验证.任何人都可以帮我添加这种反应形式的验证吗？

我正在尝试使用 React Hook Form（版本 7.6.6）构建一个表单。我创建了一个 FormInput 组件，如下所示：

const FormInput = ({ name, label }) => {
  const { control } = useFormContext();

   return (
    <Grid item xs={12} sm={6}>
      <Controller
        control={control}
        name={name}
        render={({ field }) => {
          return <TextField {...field} label={label} fullWidth required />;
        }}
      />
    </Grid>
  );

我在这里使用它：

<FormProvider {...methods}>
        <form onSubmit={handleSubmit((data) => console.log(data))}>
            <FormInput name="firstName" label="First Name" />
            <FormInput name="lastName" label="Last Name" />
            <FormInput name="address1" label="Address 1" />
            <FormInput name="email" label="Email" />
            <FormInput name="zip" label="ZIP code" />
       
         
          <Button
            type="submit" …

我试图弄清楚如何按照此处的 Formik、Material UI、React 工具的 Autocomplete 字段文档中的说明进行操作。

文档中给出的示例是：

import { Autocomplete } from 'formik-material-ui-lab';

const options = [{ title: 'The Shawshank Redemption', year: 1994 }, ...]

<Field
  name="name"
  component={Autocomplete}
  options={options}
  getOptionLabel={(option: Movie) => option.title}
  style={{ width: 300 }}
  renderInput={(params: AutocompleteRenderInputParams) => (
    <TextField
      {...params}
      error={touched['name'] && !!errors['name']}
      helperText={errors['name']}
      label="Autocomplete"
      variant="outlined"
    />
  )}
/>;

没有给出关于在 getOptionLabel 中使用 Movie 的含义的线索。当我尝试使用它时，电影和渲染输入对象中的 AutocompleteRenderInputParams 都带有下划线。我不知道为什么。

我看过这篇文章，它尝试了一种替代方法，但我也无法让它发挥作用。

我有一个表格，有两个自动完成字段。目前，它看起来像这样。

当我尝试使用表单时，提交按钮挂起，控制台日志显示：

Material-UI：getOptionLabel自动完成的方法返回 undefined 而不是“”的字符串。

import React, { useState } from 'react';
import { …

我正在尝试对我的组件进行排序

<input type="text" value={props.filters.text} onChange={(e) => {
            props.dispatch(setTextFilter(e.target.value));
        }} />
        {console.log(props.filters.sortBy)}
        <select value={props.filters.sortBy} onChange={(e) => {
            if (e.target.value === 'date') {
                props.dispatch(sortByDate());
            } else if (e.target.value === 'amount') {
                props.dispatch(sortByAmount());
            }
        }}>
            <option value="amount">Amount</option>
            <option value="date">Date</option>
        </select>

我在选择标签时遇到错误。最初获取A component is changing a controlled input of type text to be uncontrolled props.filters.sortBy 的错误值是日期。当我尝试从下拉列表中更改它时，会发生错误。