Question

新手反应问题 - 我试图按照文档彻底搞砸了。

我想要一个简单的文本输入，在按钮单击时，显示表单下方的输入值。很简单吧？

到目前为止，这是我的组件：

export default class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text"  value='' />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

然而，它根本不起作用 - 当用户输入时，表单不会显示任何内容。

我做错了什么？

Answer 1

的变化：

1。您需要从输入元素中删除<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/System.Windows.xaml"/> <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.xaml"/> <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.Input.xaml"/> <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.Navigation.xaml"/> <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.GridView.xaml"/> <ResourceDictionary Source="/Telerik.Windows.Themes.Office_Black;component/Themes/Telerik.Windows.Controls.Data.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>，否则它不允许您键入任何内容，您也没有使用任何onChange函数。

使用元素的方法：

Controlled Component: 定义onChange函数和value属性，并在该更改函数中更新该值。

Uncontrolled Component: 不要定义value属性，使用value=''来获取element的值。

2。使用带有input元素的ref来获取ref函数中的值。

检查一下：

onSubmit

class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ value: this.element.value });
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text" ref={el => this.element = el} />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

ReactDOM.render(<TextInput/>, document.getElementById('app'))

Answer 2

您需要有一个受控输入，您可以在用户输入文本字段时保存该值，然后在提交时您可以从状态获取数据。

export default class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  onChange = (event) => this.setState({ value: event.target.value });

  handleSubmit(event) {
    event.preventDefault();
    //this.setState({ value: event.target.value });
    consoole.log(this.state.value);
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text" value={this.state.value} onChange={this.onChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

这是使用受控组件获取用户输入的传统方法。

Answer 3

你的问题在

<input type="text"  value='' />

取出值

<input type="text" />

＆＃34;值＆＃34;将内容设置为每个渲染上的空字符串

Answer 4

使用句柄提交功能时，event.target是表单元素，它没有任何值，因此没有设置任何内容。处理此问题的“反应方式”是使用称为“受控输入”的东西。看看我将如何使用您的代码实现它们：

export default class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      value: ''
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.updateInput = this.updateInput.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ value: this.state.input });
  }

  updateInput(event) {
    this.setState({input: event.target.value});
  }

  render() {
    return (
      <div>
      <form onSubmit={this.handleSubmit}>
        <label>
          <input type="text"  value={this.state.input} onChange={this.updateInput} />
        </label>
        <input type="submit" value="Submit" />
      </form>
      <p>{ this.state.value }</p>
      </div>
    );
  }
}

特别注意输入的新值和我附加的更改处理程序。

Answer 5

根本不为我工作！！直到我以return形式将setState放入onChange本身中，如下所示-onChange = {e => this.setState（{name：e.target.value}）}：

notification observer

Answer 6

大多数示例似乎比它们需要的要复杂。此示例来自Codevolution的React教程：

https://www.youtube.com/watch?v=x9UEDRbLhJE

class TextInput extends Component {
    constructor(props) {
        super(props)
        this.state = {
            mytext: "",
            value: ""
        }
    }

    changeHandler = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    submitHandler = (e) => {
        this.setState({
            value: this.state.mytext
        })
        e.preventDefault()
    }

    render() {
        return (
            <form onSubmit={this.submitHandler}>
            <label>
                <input
                name="mytext"
                type="text"
                value={this.state.mytext}
                onChange={this.changeHandler} />
            </label>
            <button
                onSubmit={this.submitHandler}
                type="submit">
                    Submit
                </button>
            <p>{ this.state.value }</p>
            </form>
        )
    }
}

form上的更改将更新state字段，因此当您单击“提交”时，一切就绪。每个input字段都是name d，很容易将它们映射回它们的state。

React.js - 如何在表单提交上设置状态？

6 个答案: