相关疑难解决方法(0)

我在ES6中编写了一个简单的组件(使用BabelJS),并且函数this.setState不起作用.

典型的错误包括

无法读取未定义的属性'setState'

要么

this.setState不是函数

你知道为什么吗？这是代码:

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

最近我一直在研究很多关于使用Facebook JavaScript库React.js的功能和方法.当其差异说话的JavaScript的世界往往是两种编程风格的休息declarative和imperative被mentionned.

两者有什么区别？

我创建了表单,我有几个TextField,包含DropDownMenu材料-ui组件,问题是如何从一个obj中收集所有TextFields,DropDownMenus中的所有数据并将其发送到服务器上.对于TextField,它具有TextField.getValue()返回输入的值.但我不明白如何使用它.

var React = require('react'),
    mui = require('material-ui'),
    Paper = mui.Paper,
    Toolbar = mui.Toolbar,
    ToolbarGroup = mui.ToolbarGroup,
    DropDownMenu = mui.DropDownMenu,
    TextField = mui.TextField,
    FlatButton = mui.FlatButton,
    Snackbar = mui.Snackbar;

var menuItemsIwant = [
  { payload: '1', text: '[Select a finacial purpose]' },
  { payload: '2', text: 'Every Night' },
  { payload: '3', text: 'Weeknights' },
  { payload: '4', text: 'Weekends' },
  { payload: '5', text: 'Weekly' }
];
var menuItemsIcan = [
  { payload: '1', text: '[Select an objective]' }, …

我期待创建一个无状态组件,其输入可以由父元素验证.

在下面的示例中,我遇到了一个问题,即输入引用永远不会被分配给父的私有input属性.

什么时候ref叫,_emailAddress是handleSubmit.有什么我想念的,还是有更好的方法来做到这一点？

interface FormTestState {
    errors: string;
}

class FormTest extends React.Component<void, FormTestState> {
    componentWillMount() {
        this.setState({ errors: '' });
    }

    render(): JSX.Element {
        return (
            <main role='main' className='about_us'>             
                <form onSubmit={this._handleSubmit.bind(this)}>
                    <TextInput 
                        label='email'
                        inputName='txtInput'
                        ariaLabel='email'
                        validation={this.state.errors}
                        ref={r => this._emailAddress = r}
                    />

                    <button type='submit'>submit</button>
                </form>
            </main>
        );
    }

    private _emailAddress: HTMLInputElement;

    private _handleSubmit(event: Event): void {
        event.preventDefault();
        // this._emailAddress is undefined
        if (!Validators.isEmail(this._emailAddress.value)) {
            this.setState({ errors: 'Please enter an email address.' …

我正在使用反应,我想得到选择的下拉选项的价值反应,但我不知道如何.有什么建议？谢谢!我的下拉菜单只是一个选择:

            <select id = "dropdown">
                <option value="N/A">N/A</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>

我有React表单,它有一个用于呈现下拉列表的Component,因为选项来自API.但是,我无法访问嵌入式组件的参考.我正在整理我的第一个表格并试图了解解决这个问题的最佳方法.

var ActivityForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();

    var noteCategoryId = this.refs.note_category_id.getDOMNode().value.trim();
    var content = this.refs.content.getDOMNode().value.trim();

    if (!category || !content) {
      return;
    }

    // this.props.onCommentSubmit({author: author, text: text});

    this.refs.note_category_id.getDOMNode().value = '';
    this.refs.content.getDOMNode().value = '';
    return;
  },
  render: function() {
    return (
      <div className="new-activity">
        <h3>New Activity</h3>
        <form onSubmit={this.handleSubmit}>
          <textarea ref='content' />
          <br />

          <label>Category</label>
          <ActivityFormCategoryDropdown /> # THE REF IN THIS COMPONENT ISN'T ACCESSIBLE
          <br />

          <input type="submit" value="Add Activity" />
        </form>
      </div>
    );
  }
});

我有一个相当简单的问题,我不知道如何使用React的单向数据流来解决它.

假设您在父级中有一个显示模态的链接

在模态中,你有一个"X"来关闭它.

我知道我可以通过道具从父母改变模态的状态

// In the parent
<Modal display={this.state.showModal} />

// In the modal
<div className={this.props.display ? "show" : "hide"}>
  <a className="close">&times;</a>
  ...
</div>

我知道如何关闭模态,但不是两者兼而有之.不确定如何保持父模式和子模式共享和控制的状态.

UPDATE

在尝试尽可能保持模块化时,我认为React方法是将开/关逻辑存储在模态变量中.

var ParentThing = React.createClass({
  ...
  render (
    <Modal /> // How can I call this.open in the modal from here?
  )
});

var Modal = React.createClass({
  setInitialState: function() {
    return {
      display: false
    }
  },
  close: function() {
    this.setState({ display: false });
  },
  open: function() {
    this.setState({ display: true });
  },
  render: …

我有下面的输入字段,我需要输入输入并将其传递给下面显示的按钮的onClick事件.

<input type="text" style={textFieldStyle} name="topicBox" placeholder="Enter topic here..."/>
<input type="text" style = {textFieldStyle} name="payloadBox" placeholder="Enter payload here..."/>
<button value="Send" style={ buttonStyle } onClick={this.publish.bind(this,<value of input field 1>,<value of input field2>)}>Publish</button><span/>

我有一个名为publish的方法,它接受两个字符串参数.我需要传递输入字段中输入的值来代替这些字符串.如何在不将值存储在状态的情况下实现此目的？我不想将输入字段值存储在状态变量中.任何帮助将非常感激.

我正在尝试在React中做一些在任何其他框架中都非常简单的事情:我想从表单中收集一堆值.

以前我用Backbone View做过这种事情,它非常简单:

readFormValues: function() {
    this.data.foo = this.$('[name="foo"]').val();
    this.data.bar = this.$('[name="bar"]:checked').val();
});

但在React中我似乎无法找到一种简单的方法.看来我唯一的选择是......

注意:格式化的道歉:代码块和列表不能很好地一起播放:-(

1. 完全绕过React并使用jQuery + e.target访问表单:

   handleSubmit: function(e) {

   var $form = $(e.target).parents('form:first');

   this.data.foo = $form.find('[name="foo"]);

   },

   render: function() {

   return <form onSubmit="handleSubmit"><input name="foo"/></form>;

   }

   这很有用,而且很简单,但是当我应该使用React时,我觉得我绕过了React并使用了JQuery.

2. 为每个表单控件提供回调:

   handleFooClick: function(e) {

   this.data.foo = event.target.value;

   },

   render: function() {

   return <form><input name="foo" onChange="handleFooChange"/></form>;

   }

   这似乎是React/Flux的方式,但感觉就像一堆疯狂的不必要的工作.在我的Backbone示例中,每个表单控件只需要一行,但是使用这种方法我构建的每个最后一个控件都必须有自己的onChange处理程序(我必须在处理它时将该处理程序挂钩到每个元素).

   编辑:这种方法的另一个缺点是在回调内部this.props并且this.state不会指向我的表单控件的props/state(它将指向输入的 props/state).这意味着我不仅要为每个输入编写一个处理程序,并在渲染时将该回调添加到每个输入,但我还必须将我的数据对象传递给每个输入!

3. 使用refs:

   handleSubmit: function(e) {

   this.state.data.foo = this.refs.foo.value;

   },

   render: function() {

   return <form><input ref="foo"/></form>;

   } …

我在使用jest和酶测试组件时遇到了一些困难.我想要做的是测试在名称字段中提交没有值的表单.这将确保组件显示错误.但是,当我运行其余的时,我在控制台中收到错误:

TypeError:无法读取未定义的属性"value"

我对前端测试和一般测试都很陌生.所以,我不完全确定我正在使用酶进行这种类型的测试.我不知道我的测试是否不正确,或者我是否刚编写了一个不易测试的组件.我愿意改变我的组件,如果这样可以更容易测试吗？

零件

class InputForm extends Component {
  constructor(props) {
    super(props);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  onFormSubmit(e) {
    e.preventDefault();
    // this is where the error comes from
    const name = this.name.value;
    this.props.submitForm(name);
  }

  render() {
    let errorMsg = (this.props.validationError ? 'Please enter your name.' : null);
    return (
      <form onSubmit={(e) => this.onFormSubmit(e)}>
        <input
          type="text"
          placeholder="Name"
          ref={ref => {
                 this.name = ref
               }}
        />
        <p className="error">
          {errorMsg}
        </p>
        <input
          type="submit"
          className="btn"
          value="Submit"
        />
      </form>
      );
  }
}
InputForm.propTypes = {
  submitForm: …

我为密码输入字段创建了一个React控制组件:

onPasswordChange(ev) {
  this.setState({
    passoword: ev.target.value
  });
}

<input
  value={this.state.password}
  onChange={this.onPasswordChange}
>

正如您在下图中看到的那样,如果组件被控制,我可以看到密码值,如果我去检查元素.我的问题是:这是控制密码输入的正确方法吗？(安全明智).

我知道我可以在输入字段上使用ref = {}但我想知道处理密码字段的最佳实践.

我想在添加/删除按钮的同时从父DOM元素添加/删除类，例如，如果我单击添加类按钮，则它将新的类名称“单击”添加到父div，并在单击删除类按钮时删除该类：

index.html

<div class="main-div">

  <div class="second-div" id="config">
  </div>

</div>

config.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Main from 'Main';

ReactDOM.render(
    <Main/>,
    document.getElementById('config')
);

Main.jsx

import ReactDOM from 'react-dom'
import React from "react";
import createReactClass from "create-react-class";


export default createReactClass({
    getInitialState() {
        return {
            show-main-div: false
    };
    },

    addClass() {
    // want to add new class on parent DOM element i.e <div class="main-div">
    },

    render: function () {
        return (
            <div>
                <button className="add-class" onClick={() => {this.addClass()}}>
                    Add Class …