Question

我正在尝试使用setAttribute绑定元素。它有效，但不允许我更改值。

基本上我想从state传递一个值作为输入中的值。

目前，状态不会在渲染中更新。它只需要初始状态。在渲染中，我的'console.log'只触发一次。

正确的this.state.answer确实出现在componentDidUpdate中（并做了Mount）。

我把它放在JSFiddle https://jsfiddle.net/69z2wepo/91132/

上

class Hello extends React.Component {
  cf = null
  state = {answer:''}

  componentDidMount(){
    this.refs.q1.setAttribute('cf-questions', "How are you?")
    this.cf = window.cf.ConversationalForm.startTheConversation({
      formEl: this.refs.form,
      context: document.getElementById("cf-context"), // <-- bind this to an element instead of html body
      flowStepCallback: (dto, success, error) => {
      // dto.text contains the value being passed to the form

      // State appears in console.log
      // dto.text = 'blah' + this.state.answer 
      // above ONLY passes 'blah'
        success()  
      },
    });
  }
componentDidUpdate(props) {
     this.refs.q1.setAttribute("value", this.state.answer);
  }
  onChange = e => {
    this.setState({ answer: 'X' });
  }
  render() {
console.log('a change', this.state.answer)
// Only fires once
    return (
      <div>
      <button onClick={this.onChange} className='but'> onChng </button>
        <div id="cf-context" >
          <form id="form" className="form" ref="form">
          <select ref="q1" type="radio" id="links">
              <option value="X">X</option>
              <option value="Y">Y</option>
            </select>
          </form>
        </div>
      </div>

    );
  }
}

Answer 1

最有可能的问题是在componentDidMount（）方法中。

我不确定你一直在做什么。但我想你是在那个特定的div“cf-context”中设置表单元素的范围。

因此，即使在更新状态之后，它也会从已设置的特定范围获取值“this”。尝试将范围进一步向上移动到DOM的顶部

我不确定这是对的。请尝试

状态不在渲染内部更新

1 个答案: